vue3项目用的是 setup ;el-tree 选中父元素 也让父元素底下的children也默认被选中
时间: 2024-03-26 10:39:53 浏览: 69
在 Vue3 中,使用 `setup` 函数来替代 Vue2 中的 `data`、`methods` 等选项。对于 ElementUI 的 `el-tree` 组件,我们可以通过 `checkedKeys` 和 `checkStrictly` 两个属性来实现选中父元素也让父元素底下的 children 也默认被选中的功能。
具体实现代码如下:
```vue
<template>
<el-tree
:data="data"
:props="defaultProps"
:checked-keys="checkedKeys"
:check-strictly="checkStrictly"
@check="handleCheck"
></el-tree>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const data = [
{
id: 1,
label: '父节点1',
children: [
{
id: 11,
label: '子节点1-1'
},
{
id: 12,
label: '子节点1-2'
}
]
},
{
id: 2,
label: '父节点2',
children: [
{
id: 21,
label: '子节点2-1'
},
{
id: 22,
label: '子节点2-2'
}
]
}
];
const defaultProps = {
children: 'children',
label: 'label'
};
const checkedKeys = ref([]);
const checkStrictly = ref(true);
const handleCheck = (checkedKeys, { node }) => {
if (node.children && node.children.length > 0) {
// 选中父元素时,同时选中它的所有 children
if (checkedKeys.includes(node.id)) {
const childrenKeys = node.children.map(child => child.id);
checkedKeys.value = Array.from(new Set([...checkedKeys, ...childrenKeys]));
}
// 取消选中父元素时,同时取消选中它的所有 children
else {
const childrenKeys = node.children.map(child => child.id);
checkedKeys.value = checkedKeys.filter(key => !childrenKeys.includes(key));
}
}
};
return {
data,
defaultProps,
checkedKeys,
checkStrictly,
handleCheck
};
}
};
</script>
```
以上代码中,我们使用 `ref` 来定义 `checkedKeys` 和 `checkStrictly` 两个响应式变量,分别用来存储选中的节点和设置是否严格选中模式。在 `handleCheck` 方法中,我们监听 `check` 事件,并通过 `node.children` 判断当前节点是否有子节点。若有子节点,则根据选中状态,同时选中或取消选中其所有子节点。最后,将选中节点的 `id` 值存入 `checkedKeys` 数组中,实现选中父元素也让父元素底下的 children 也默认被选中的功能。
阅读全文