|
@@ -11,7 +11,7 @@
|
|
|
:filter-node-method="filterNode"
|
|
|
ref="tree"
|
|
|
:render-content="renderContent"
|
|
|
- @node-click="handleNodeClick"
|
|
|
+ @check-change="handleNodeClick"
|
|
|
/>
|
|
|
</el-card>
|
|
|
</div>
|
|
@@ -77,7 +77,7 @@ export default {
|
|
|
});
|
|
|
// 检查选中的节点状态,如果没有选中节点则调用 updateDataBase({})
|
|
|
if (!this.selectedNodeId) {
|
|
|
- this.updateDataBase({});
|
|
|
+ this.updateDataBase([]);
|
|
|
}
|
|
|
},
|
|
|
getAllData() {
|
|
@@ -99,12 +99,29 @@ export default {
|
|
|
},
|
|
|
handleNodeClick(data) {
|
|
|
this.selectedNodeId = data.id;
|
|
|
- this.updateDataBase(data);
|
|
|
+
|
|
|
+ this.updateDataBase(this.$refs.tree.getCheckedNodes());
|
|
|
+ },
|
|
|
+ // 父节点复选框改变时递归设置子节点状态
|
|
|
+ handleParentNodeChange(node, isChecked) {
|
|
|
+ // 设置父节点及所有子节点状态
|
|
|
+ this.$refs.tree.setChecked(node, isChecked, true); // true 表示递归操作
|
|
|
},
|
|
|
renderContent(h, { node, data }) {
|
|
|
return h("span", [
|
|
|
+ // 子节点复选框
|
|
|
node.level > 1
|
|
|
? h("span", [
|
|
|
+ h("el-checkbox", {
|
|
|
+ props: {
|
|
|
+ value: node.checked,
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ change: (val) => {
|
|
|
+ this.$refs.tree.setChecked(node, val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }),
|
|
|
h("svg-icon", {
|
|
|
props: {
|
|
|
"icon-class": "fields2",
|
|
@@ -114,18 +131,19 @@ export default {
|
|
|
])
|
|
|
: null,
|
|
|
|
|
|
+ // 父节点复选框
|
|
|
node.level === 1
|
|
|
? h("span", [
|
|
|
h(
|
|
|
- "el-radio",
|
|
|
+ "el-checkbox",
|
|
|
{
|
|
|
props: {
|
|
|
- value: this.selectedNodeId,
|
|
|
- label: data.id,
|
|
|
+ value: node.checked,
|
|
|
+ indeterminate: node.indeterminate, // 用于半选状态
|
|
|
},
|
|
|
on: {
|
|
|
- input: (val) => {
|
|
|
- this.selectedNodeId = val;
|
|
|
+ change: (val) => {
|
|
|
+ this.handleParentNodeChange(node, val);
|
|
|
},
|
|
|
},
|
|
|
},
|