表格代码:
<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"
需要注意几点
- classId的唯一性
- 当添加这两行代码后 如果表格的渲染数据list为null 会报下面的错误
Cannot read property 'reduce' of null
很多资料说是element跟vue版本问题。
解决这个报错 只需将 渲染表格的数据 list 置为[] 空数组
其他会用到的方法:
//@selection-change 会返回所有选中的数据
//@select 会返回所有选中的数据及当前操作的数据
清空所有选中
this.$refs.multipleTable.clearSelection();//页面中有搜索或重置时可能会用到。
默认选中
this.$refs.multipleTable.toggleRowSelection(this.list[index]);//必须传表格的数据;以数组[下标]格式传递
单选框:
<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。
原文地址:https://segmentfault.com/a/1190000019263783