elementui实现表格(el-table)默认选中功能
作者：徐_三岁
这篇文章主要介绍了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)
})
}到此这篇关于elementui实现表格(el-table)默认选中的文章就介绍到这了,更多相关elementui el-table默认选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！