vue+elementui
表格的全选框需要做回显效果
页面数据来自接口请求,回显数据来自本地浏览器 sessionStorage
效果如图:
部分代码:
<--! 添加ref 属性 起名table1 -->
<el-table :data="dataList" ref="table" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" >
<el-table-column prop="id" header-align="center" align="center" label="id">
</el-table-column>
<el-table-column prop="title" header-align="center" align="center" label="行业/标题">
</el-table-column>
……
<el-table/>
// 获取数据列表
getDataList() {
//post接口请求
……
}).then(({
data
}) => {
// 数据列表
this.dataList = data.list
}).then(() => {
// 回显数据
var industMenuEntities = JSON.parse(sessionStorage.getItem("industMenuEntities"))
for (let i = 0; i < this.dataList.length; i++) {
for (let j = 0; j < industMenuEntities.length; j++) {
if (this.dataList[i].id == industMenuEntities[j].id) { //根据id做比较 决定是否回显
// 这里放进$refs.table1.toggleRowSelection的回显数据必须和数据列表 数据字段完全相同才行 并且字段值完全相等的才会选中
this.$refs.table1.toggleRowSelection(this.dataList[i], true);
}
}
}
})
},
也可以是
this.$refs.table1.toggleRowSelection ( industMenuEntities [ j ] , true );
但是我的回显数据做过处理,缺了字段,所以踩了个坑,这里只拿它的id值做比较,存进去的还是列表的原数据