vue elementui table回显解决切换table分页的时候先前选中的checkbox状态消失的问题

置顶木毅01

已于 2024-07-05 17:18:50 修改

阅读量378

点赞数 9

分类专栏： vue elementui 文章标签： vue.js elementui javascript

于 2024-06-19 11:23:30 首次发布

本文链接：https://blog.csdn.net/qq_27806371/article/details/139797681

版权

vue 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

elementui

5 篇文章 0 订阅

订阅专栏

通常使用的是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: []