首先是表格记住勾选状态
之前用的公司的组件,然后手动写方法用this.$set
进行状态的勾选
但比较麻烦,开了很多数组与对象
watch: {
tableData(n, o) {
...
this.$nextTick(() => {
n.forEach( row => {
if(row.id == currentId && checkTmpArr[item.id]) {
this.$set(row, '_isChecked', true);
} else {
this.$set(row, '_isChecked', false);
}
})
return n
})
}
}
然鹅…
后来无意间发现了el-table这个属性…
就果断放弃了之前麻烦的方法,换成了el-table
就可以很方便的在切换页码之后,再返回,仍可记住勾选状态
后来的需求是列表中某个用户需要默认被勾选上,于是加了@select
方法和其他一系列操作进行实现
<el-table
class="addMemberTable"
:data="tableData"
:row-key="getRowKey" //reserve-selection必须要有这个属性
@selection-change="selectChange"
@select="selectSingle"//可完成默认选中并且不可取消
ref="multiTable">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column prop="username" label="用户名">
...
</el-table-column>
</el-table>
methods: {
getRowKey(row){
return row.id;
},
selectChange(row){
this.selectedRows = row;
},
selectSingle(selection,row){
if(row.id == this.currentUser.id){
this.selectionChange()
}
},
// 该方法要在获取到后台数据之后就调用,可能在mounted里,也可以在.then中
selectionChange() {
this.$nextTick(() => {
let table = this.tableData; // 从后台获取到的数据
table.forEach(row => {
if (row.id == this.currentUser.id)
this.$refs.multiTable.toggleRowSelection(row, true);
});
});
},
}