// heml el-tree 需要配置node-key
<el-tree
ref="treeData"
class="treeClass"
node-key="id"
default-expand-all
show-checkbox
></el-tree>
// 获取半选和全选
// 获取所有的复选框已经勾选的id
getAllCheckedKeys(list) {
const defaultCheckedKeys = [];
// 获取ref
const treeDataRef = this.$refs.treeData;
// 返回半选和全选的数据
// getCheckedNodes:全选的集合,getHalfCheckedNodes半选的集合
const treeDataList = [...treeDataRef.getCheckedNodes(), ...treeDataRef.getHalfCheckedNodes()];
return defaultCheckedKeys;
},
// 对半选和全选的进行反选
async initCheckoutTree() {
// 初始化需要等dom元素加载完毕以后在进行获取ref
await this.$nextTick();
// defaultCheckedKeys:后端返回的选中id [1,3,4,56,7,8,9,223]
const treeDataRef = this.$refs.treeData;
for (const key of this.defaultCheckedKeys) {
// getNode(获取tree中对应的节点)
const node = treeDataRef.getNode(key);
// isLeaf(判断节点是否为叶子节点)
// 如果存在isLeaf 代表是叶子节点为最后一级那么就选中即可 不是则不选择
if (node?.isLeaf) {
// setChecked (设置tree中对应的节点为选中状态)
treeDataRef.setChecked(node, true);
}
}
},
element tree获取半选id和全选id 和回显半选id加全选id
于 2022-07-20 11:26:51 首次发布