vue3 element-plus el-table表格toggleRowSelection方法选中无效
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
const toggleSelection = (rows?: User[]) => {
if (rows) {
rows.forEach((row) => {
multipleTableRef.value!.toggleRowSelection(row, undefined)
})
} else {
multipleTableRef.value!.clearSelection()
}
}
以上是element-plus官方的一个选中示例。如果我们新建一个row数据,发现就是勾选不上,延迟执行也不行
let row={
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
multipleTableRef.value!.toggleRowSelection(row, undefined)
直到我看了一位博主写的文章,el-table源代码选中的row,是用的tableData的引用,简单说:
不管怎样遍历,toggleRowSelection方法传入的row,都要从表格tableData里取值,类似tableData[0]这样,或者tableData.forEach中的item
如果需要通过接口加载完表格数据,再回显勾选,那还需要写在nextTick函数里边,实例如下:
<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
const table = reactive({
tableData: [],
selected:[]//已选数据id
});
const tableRef = ref();
//获取表格数据
const getTable=()=> {
getTableData(params).then((res) => {
table.tableData = res.data?? [];
// 选中
nextTick(() => {
table.tableData.forEach(item => {
let result = table.selected.find(row => row == item.id);
if (result) {
tableRef.value.toggleRowSelection(item, true);
}
});
});
})
}
</script>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)