vue+ElementUi 选择框选中之后翻页进行状态保持。及默认选中

复选框

<el-table
:data="list"
ref="multipleTable"
:row-key="(row)=>{ return row.classId}"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection" :reserve-selection="true" ></el-table-column>
</el-table>

//切换分页持久化选中表格

:row-key="(row)=>{ return row.classId}"
:reserve-selection="true"

//@selection-change 会返回所有选中的数据
//@select 会返回所有选中的数据及当前操作的数据

清空所有选中

this.$refs.multipleTable.clearSelection();//页面中有搜索或重置时可能会用到。

默认选中

/**

 * @msg: rows为数组，数组内容为表格row-key定义的值
 * @param {rows} {}
 * @return: 
 */

toggleSelection(rows) {
      console.log("复选框回显", rows);
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

复选框选中

handleSelectionChange(val) {
  //表格执行默认选中时，渲染表格时会自动执行该事件
  // 如果在选中的表格里有修改值的地方，需注意深拷贝浅拷贝问题
  this.currentRow = val;
},

取消选中某一项

onDetele(val, items) {
 // 这个方法修改的是表格的store，不会触发@selection-change
 //需要注意this.$refs.multipleTable.toggleRowSelection这个官网的方法会触发@selection-change
      this.$refs.multipleTable.store.states.selection.map((item, index) => {
        if(item.classId === val.classId){
          this.$refs.multipleTable.store.states.selection.splice(index, 1)
        }
      })

      

      //我是在这里手动执行
      this.handleSelectionChange(this.$refs.multipleTable.store.states.selection)
    },

单选框

<el-table
      :data="list"
      ref="multipleTable"
      :row-key="(row)=>{ return row.classId}"
      @current-change="handleCurrentRadio"
      style="width: 100%">
      <el-table-column width="80" v-if="radioShow">
        <template slot-scope="scope">
          <el-radio v-model="radio"  :label="scope.row.classId">{{''}}</el-radio>
        </template>
              </el-table-column>
    </el-table>

//@current-change="handleCurrentRadio"会返回选中的数据。可以在这个事件用return false 来阻止选中
//label 和原生的value属性一样。 利用v-model来绑定唯一值，意味着label的值为唯一的。
//{{""}}为了让单选框不显示label。