el-tree 后端要求子级勾选一个,夫级也要获取到id 存到数组传给后端
时间: 2024-12-15 08:26:50 浏览: 6
ElementUI中el-tree节点的操作的实现
`el-tree` 是 Element UI 提供的一个树形组件,用于展示层级结构数据。如果你想要实现这样的功能,即用户在勾选子节点的同时,将勾选的父节点ID也一并传递给后端,你可以这样做:
1. **绑定事件处理**:
在 `el-tree` 的节点上绑定 `check` 事件,当子节点被勾选(`checked` 属性变化),同时记录其父节点ID。
```javascript
<template>
<el-tree
:data="treeData"
node-key="id"
@check-change="handleCheckChange"
></el-tree>
</template>
<script>
export default {
methods: {
handleCheckChange(node) {
if (node.indeterminate || !node.checked) return; // 确保只处理确定状态的勾选
const parent = this.findParentOfNode(node); // 自定义查找父节点函数
if (parent) {
this.selectedIds.push(parent.id);
}
},
findParentOfNode(child) {
return this.treeData.find(parent => parent.children.some(p => p.id === child.id));
},
},
data() {
return {
treeData,
selectedIds: [], // 用于存储父节点ID的数组
};
},
};
</script>
```
2. **发送请求**:
当用户操作完成,比如点击提交按钮,调用一个方法将 `selectedIds` 数组发送给后端。记得在后端接收这个数组时,验证父节点是否存在。
```javascript
methods: {
submitForm() {
// 将已选择的父节点ID数组发送到后端
this.$axios.post('/api/submit', { selectedParentIds: this.selectedIds });
},
},
```
阅读全文