如何在element UI的tree组件中获取选中的数据及半选中节点数据并还原成原本data的格式
时间: 2024-05-10 09:17:55 浏览: 62
Element-ui 多选.md
在 Element UI 的 tree 组件中,可以通过 `node-key` 属性来设置节点的唯一标识符。然后,可以通过 `@check-change` 事件来监听节点选中状态的变化。
在 `@check-change` 事件的处理函数中,可以通过 `checkedKeys` 和 `halfCheckedKeys` 属性获取选中的节点和半选中的节点。然后,通过遍历原始数据,找到对应的节点,并将对应节点的 `checked` 属性和 `halfChecked` 属性设置为 true 或 false,还原成原本 data 的格式。
以下是一个简单的示例代码:
```html
<template>
<el-tree
:data="data"
:node-key="nodeKey"
:props="defaultProps"
:check-strictly="true"
@check-change="handleCheckChange"
/>
</template>
<script>
export default {
data() {
return {
nodeKey: 'id',
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'isLeaf'
},
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 2,
label: '二级 1-1',
children: [
{
id: 3,
label: '三级 1-1-1'
},
{
id: 4,
label: '三级 1-1-2'
}
]
},
{
id: 5,
label: '二级 1-2',
children: [
{
id: 6,
label: '三级 1-2-1'
},
{
id: 7,
label: '三级 1-2-2'
}
]
}
]
}
]
}
},
methods: {
handleCheckChange(checkedKeys, halfCheckedKeys) {
const data = JSON.parse(JSON.stringify(this.data))
function traverse(node) {
const { id, children } = node
if (checkedKeys.includes(id)) {
node.checked = true
} else if (halfCheckedKeys.includes(id)) {
node.halfChecked = true
}
if (children && children.length > 0) {
children.forEach(traverse)
}
}
data.forEach(traverse)
console.log(data)
}
}
}
</script>
```
在上面的示例代码中,`handleCheckChange` 方法会遍历原始数据,找到对应的节点,并将节点的 `checked` 属性和 `halfChecked` 属性设置为 true 或 false。最后,可以将还原后的数据用于其他需要使用的地方。
阅读全文