vue elementui-tree树形,父节点与其子节点全选中 不传父节点 只传选中的 子节点值给后端
时间: 2023-10-27 10:22:30 浏览: 187
vue elementUI tree树形控件获取父节点ID的实例
你可以通过以下步骤来实现:
1. 在选中节点时,将该节点的值存储到一个数组中。
2. 在取消选中节点时,从数组中移除该节点的值。
3. 在提交数据时,先遍历所有选中的节点,然后判断它们的父节点是否被选中。如果父节点没有被选中,则将父节点的值也添加到数组中。
4. 将数组提交到后端即可。
以下是示例代码:
```javascript
<el-tree
:data="treeData"
node-key="id"
:check-strictly="true"
:default-expand-all="true"
:default-checked-keys="checkedKeys"
@check-change="handleCheckChange">
</el-tree>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Node 1',
children: [
{
id: 2,
label: 'Node 1-1'
},
{
id: 3,
label: 'Node 1-2'
}
]
},
{
id: 4,
label: 'Node 2'
}
],
checkedKeys: []
};
},
methods: {
handleCheckChange(checkedKeys, e) {
const { checked, node } = e;
if (checked) {
this.checkedKeys.push(node.id);
} else {
const index = this.checkedKeys.indexOf(node.id);
if (index !== -1) {
this.checkedKeys.splice(index, 1);
}
}
},
submitData() {
const selectedNodes = this.$refs.tree.getCheckedNodes();
const selectedIds = selectedNodes.map(node => node.id);
selectedNodes.forEach(node => {
let parent = this.$refs.tree.getNode(node.parent);
while (parent) {
if (!selectedIds.includes(parent.id)) {
selectedIds.push(parent.id);
}
parent = this.$refs.tree.getNode(parent.parent);
}
});
// 提交 selectedIds 到后端
}
}
};
</script>
```
阅读全文