vue+elementui实现表格默认选中(el-table)
实现效果表格默认勾选指定的一行或多行代码实现——HTML部分用elementUi的组件el-table,设置type的属性为selection<el-tableref="dataTable":data="dataList"border@selection-change="selectionChangeHandle"style="width: 100%;">
·
实现效果
表格默认勾选指定的一行或多行
代码实现——HTML部分
用elementUi的组件el-table,设置type
的属性为selection
<el-table
ref="dataTable"
:data="dataList"
border
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="userName"
header-align="center"
align="center"
label="用户昵称">
</el-table-column>
<el-table-column
prop="mobile"
header-align="center"
align="center"
label="手机号">
</el-table-column>
</el-table>
代码实现——JS部分
首先拿到表格中的默认数据——判断后端给的默认接口返回的数据id与表格中的数据id是否一致
通过调用toggleRowSelection
方法,实现选中
this.refs.dataTable.toggleRowSelection(表格默认的数据,true)
this.$http({
url: ' ', //后端提供的接口
method: 'get'
}).then(({data}) => {
let list = []
this.dataList.forEach((item) => {
data.data.forEach(val => {
if (val.customerId === item.id) {
list.push(item)
}
})
})
if (list) {
list.forEach((row) => {
this.$refs.dataTable.toggleRowSelection(row, true)
})
}
})
提示:
主要是要知道表格中的哪一行需要被默认选中,再将数据放入方法中即可
方法:
创建一个空数组
,用来存放默认数据 (默认数据可能不止一个,用数组存放)遍历表格的数据
,再遍历后端给的接口数据
,两者id一致(不一定是要id,两者之间共同的标识即可,一般以id做判断)把判断出来的默认表格数据push到创建的数组中
再遍历数组,将数据放入方法中
更多推荐
已为社区贡献2条内容
所有评论(0)