
elementui 树节点点击后,el-table子节点选中没有打勾
这个问题是在使用 elementui 树状表格组件时遇到的。当点击树的父节点时,相应的子节点可以正常选中,但子节点的复选框中没有打勾。
解决方案
主要解决方式是:
代码示例
<template>
<el-table
v-loading="loading"
:data="customList"
@selection-change="handleSelectionChange"
:row-key='rowKeyFunc'
:tree-props="{children: 'children'}"
:row-class-name="rowClassNameFun"
ref="table"
@select-all="selectAllFun"
@select="selectFun"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="买家名称" align="center" prop="customName" width="120px"/>
<el-table-column
label="联系人"
align="center"
prop="linkman"
width="180"
>
</el-table-column>
<el-table-column
label="联系电话"
align="center"
width="200"
prop="phone"
/>
<el-table-column
label="地址"
align="center"
width="200"
prop="address"
/>
</el-table>
</template>
<script>
import { getCustomList } from '@/api/iam'
export default {
data() {
return {
// ...
selectItem: [], // 选中的数据
}
},
methods: {
// ...
// 全选或全不选
selectAllFun(selection) {
let isAllSelect = this.checkIsAllSelect()
if (isAllSelect) {
this.selectItem = []
} else {
this.customList.forEach((item) => {
this.selectItem.push(item)
if (item.children?.length > 0) {
item.children.forEach(obj => {
this.selectItem.push(obj)
})
}
})
}
this.customList.forEach((item) => {
item.isSelect = isAllSelect
this.$refs.table.toggleRowSelection(item, !isAllSelect)
this.selectFun(selection, item, true)
})
},
// 选中一行
selectFun(selection, row, state) {
this.setRowIsSelect(row, state)
this.setSelectItem(row)
},
// 设置选中状态
setRowIsSelect(row, state) {
// ...
if (!state) this.setSelectItem(row)
},
// 设置选中集合
setSelectItem(row) {
let index = this.selectItem.indexOf(row)
if (row.isSelect) {
// ...
} else {
// ...
}
},
// ...
},
}
</script>เพิ่มเติม
解决此问题时,还需要注意以下事项:
以上就是ElementUI 树节点点击后,子节点选中但复选框未打勾如何解决?的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号