Vue.js树形控件高级应用：联动勾选与父级半勾选状态

2023-09-13 20:26:29

Vue.js 树形控件：揭秘联动勾选和父级半勾选的奥秘

在构建用户界面时，您可能经常需要展示具有层级关系的数据，例如文件系统、组织结构或目录结构。这时，Vue.js 树形控件便派上了用场。它是一种强大的组件，可轻松实现数据的展开、折叠、拖拽等操作，为用户提供直观的数据展示方式。

为了进一步增强交互性，Vue.js 树形控件还支持联动勾选和父级半勾选状态。联动勾选允许用户勾选或取消勾选一个父级节点，从而自动勾选或取消勾选其所有子节点。父级半勾选状态则表示当一个父级节点的子节点不全被勾选时，该父级节点处于半勾选状态。

实现联动勾选

实现联动勾选的关键在于使用递归。以下代码示例展示了如何编写一个递归函数 checkNode，它将自动勾选或取消勾选一个节点及其所有子节点：

function checkNode(node, checked) {
  // 勾选或取消勾选该节点
  node.checked = checked;

  // 递归地勾选或取消勾选该节点的所有子节点
  for (let i = 0; i < node.children.length; i++) {
    checkNode(node.children[i], checked);
  }
}

实现父级半勾选状态

要实现父级半勾选状态，我们需要编写另一个递归函数 updateNodeSemiChecked，它将根据子节点的勾选状态更新父级节点的半勾选状态：

function updateNodeSemiChecked(node) {
  // 计算该节点的半勾选状态
  let semiChecked = false;
  for (let i = 0; i < node.children.length; i++) {
    if (node.children[i].checked) {
      semiChecked = true;
      break;
    }
  }

  // 更新该节点的半勾选状态
  node.semiChecked = semiChecked;

  // 递归地更新该节点的父节点的半勾选状态
  if (node.parent) {
    updateNodeSemiChecked(node.parent);
  }
}

代码示例

以下代码示例展示了如何使用 Vue.js 树形控件实现联动勾选和父级半勾选状态：

<template>
  <tree
    :data="data"
    :check-on-click-node="true"
    @check-change="checkNode"
  ></tree>
</template>

<script>
import Tree from "vue-tree-component";

export default {
  components: { Tree },

  data() {
    return {
      data: [
        {
          id: 1,
          name: "Parent 1",
          children: [
            {
              id: 2,
              name: "Child 1-1",
            },
            {
              id: 3,
              name: "Child 1-2",
            },
          ],
        },
        {
          id: 4,
          name: "Parent 2",
          children: [
            {
              id: 5,
              name: "Child 2-1",
            },
            {
              id: 6,
              name: "Child 2-2",
            },
          ],
        },
      ],
    };
  },

  methods: {
    checkNode(node, checked) {
      checkNode(node, checked);
      updateNodeSemiChecked(node);
    },
  },
};
</script>