elementui实现表格(el-table)默认选中
方法:
创建一个空数组用来存放默认数据
遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致(两者之间共同的标识即可,一般以id做判断)
把判断出来的默认表格数据push到创建的数组中
再遍历数组,将数据放入方法中
实现代码
HTML部分
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
JS部分
//创建一个空数组用来存放默认数据
let list = []
//遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致
this.tableData.forEach((item) => {
this.tableList.forEach(val => {
if (val.id=== item.id) {
// 把判断出来的默认表格数据push到创建的数组中
list.push(item)
}
})
})
if (list) {
//再遍历数组,将数据放入方法中
list.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
}
更多推荐
所有评论(0)