vue element-ui 实现el-table表格 多选以及回显
<el-tablev-loading="roleInfaceLoading"ref="multipleApiTable":data="data"tooltip-effect="dark"row-key="id"style="width: 100%"..
·
<el-table
v-loading="roleInfaceLoading"
ref="multipleApiTable"
:data="data"
tooltip-effect="dark"
row-key="id"
style="width: 100%"
@selection-change="handleInfaceSelectionChange"
>
<el-table-column :reserve-selection="true" align="center" type="selection" width="100"></el-table-column>
<el-table-column align="center" prop="name" label="接口名称">
</el-table-column>
<el-table-column align="center" prop="path" label="接口路径">
</el-table-column>
</el-table>
1.选中获取当前列表信息
handleInfaceSelectionChange(val) {
this.apiIds = val.map(v => {
return v.id
})
},
已知id回显
Promise.all([getRoels()]).then((res) => {
this.pageRoleData = res[0].data.data_list
let checkedrow = []
res[0].data.data_list.forEach(item => { // 后台返回的table数据源
row.role_ids.forEach(v => { 后台返回的回显id
if (item.id == v) {
checkedrow.push(item) // 相等添加到空数组中
}
})
})
this.$nextTick(() => {
checkedrow.forEach(row => {
this.$refs.multipleApiTable.toggleRowSelection(row, true) // 回显
})
})
this.roleLoading = false
})
this.data_id = row.id;
},
关闭对话框清空选中信息
resetRoleDialog() {
this.$refs.multipleApiTable.clearSelection();
},
更多推荐
已为社区贡献8条内容
所有评论(0)