通常使用的是selection-change方法 如果要切换table页面 还保留勾选状态和值的话 就得用select方法 后面的row就是当前的对象 选中的时候监听row里的lessonId是否在选中的数组集合里 在的话干掉对应的元素 不在的话把row加进去 大概这么个思路

<el-table :row-key="rowKey" :data="tableData" ref="multipleTable" style="margin-top: 20px;" @select="handleSelectionChange">
        <el-table-column prop="date" label="选择" align="center" width="55" type="selection" :reserve-selection="true">
        </el-table-column>        
        <el-table-column prop="startTimeValue" label="时间" align="center">
        </el-table-column>
        <el-table-column prop="duration" label="时长" align="center">
          <template slot-scope="scope">
            <span>{{ formatSecondsToMinutes(scope.row.duration) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="className" label="班级" align="center">
        </el-table-column>        
      </el-table>


 data() {
    return {
      multipleSelection: [],
      selectedText: '', // 选中的文本字符串
      selectedIds: [],
 ...

rowKey (row) {
      return row.index
    },

handleSelectionChange(val,row) {//重点在这边          
      if(val.length == 0) return 
      let multipleSelection = JSON.parse(JSON.stringify(this.multipleSelection))
      //判断有木有相同的 lessonId
      let hasSameLessonId = multipleSelection.some(item => item.lessonId === row.lessonId);
      if (!hasSameLessonId) {
        //没有相同的lessonId就push进去
        multipleSelection.push(row);
      } else {
        // 如果存在,则需要从multipleSelection中删除具有相同lessonId的元素
        multipleSelection = multipleSelection.filter(item => item.lessonId !== row.lessonId);
      }
      this.multipleSelection = multipleSelection
      this.selectedText = this.multipleSelection.map(item => item.name).join('、 ')      
      this.selectedIds = this.multipleSelection.map(item => item.lessonId);
    },


//然后这里是回显
getStatisticsClassRecordList(){
      let params = {
        classId: this.queryParams.classId,
        coursewareId: this.trackingInfo.coursewareId,
        schoolId: this.trackingInfo.schoolId ? this.trackingInfo.schoolId : "",
        startTime: this.queryParams.timeValue,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }
      getStatisticsClassRecordListData(params).then(response => {
        if(response.code == 200){
          this.tableData = response.rows
          if(response.rows.length == 0){
            this.resetData(2)
          }
          this.total = response.total                     
          this.$nextTick(() => { //这里是回显的代码 重点selectedIds
            this.$refs.multipleTable.clearSelection();
            this.selectedIds.forEach(id => {
              const row = this.tableData.find(row => row.lessonId === id);
              if (row) {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              }
            });
          })         
        }
      });
    },

//关闭弹窗 添加成功后记得重置一下selectedTemporaryText: [] selectedTemporaryIds: []

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐