vue 树形checkbox实现

vue 树形checkbox实现

递归组件实现树形结构

创建递归组件TreeCheckbox，通过v-for渲染子节点。组件接收treeData作为prop，每个节点包含label、children等属性。

<template>
  <div>
    <div v-for="node in treeData" :key="node.id">
      <label>
        <input 
          type="checkbox" 
          v-model="node.checked"
          @change="handleCheck(node)"
        />
        {{ node.label }}
      </label>
      <TreeCheckbox 
        v-if="node.children && node.children.length"
        :treeData="node.children"
        @check-change="handleChildChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeCheckbox',
  props: {
    treeData: Array
  },
  methods: {
    handleCheck(node) {
      this.$emit('check-change', node)
    },
    handleChildChange(node) {
      this.$emit('check-change', node)
    }
  }
}
</script>

父子节点联动逻辑

实现选中父节点时自动选中所有子节点，或子节点全部选中时自动选中父节点。

methods: {
  handleCheck(node) {
    this.toggleChildren(node, node.checked)
    this.updateParentStatus(node)
    this.$emit('check-change', node)
  },
  toggleChildren(node, checked) {
    if (node.children) {
      node.children.forEach(child => {
        child.checked = checked
        this.toggleChildren(child, checked)
      })
    }
  },
  updateParentStatus(node) {
    let parent = this.findParent(this.treeData, node)
    while (parent) {
      const allChildrenChecked = parent.children.every(child => child.checked)
      parent.checked = allChildrenChecked
      parent = this.findParent(this.treeData, parent)
    }
  },
  findParent(tree, node) {
    for (const item of tree) {
      if (item.children && item.children.includes(node)) {
        return item
      }
      if (item.children) {
        const found = this.findParent(item.children, node)
        if (found) return found
      }
    }
    return null
  }
}

数据格式示例

树形数据应包含id、label、checked和children等字段。

treeData: [
  {
    id: 1,
    label: 'Parent 1',
    checked: false,
    children: [
      {
        id: 2,
        label: 'Child 1-1',
        checked: false,
        children: []
      },
      {
        id: 3,
        label: 'Child 1-2',
        checked: false,
        children: []
      }
    ]
  },
  {
    id: 4,
    label: 'Parent 2',
    checked: false,
    children: []
  }
]

获取选中节点

提供方法获取所有选中的节点ID，便于表单提交。

methods: {
  getCheckedNodes() {
    const checkedNodes = []
    this.collectCheckedNodes(this.treeData, checkedNodes)
    return checkedNodes
  },
  collectCheckedNodes(nodes, result) {
    nodes.forEach(node => {
      if (node.checked) {
        result.push(node.id)
      }
      if (node.children) {
        this.collectCheckedNodes(node.children, result)
      }
    })
  }
}

样式优化

添加CSS样式增强可视化效果，如缩进表示层级关系。

.tree-item {
  margin-left: 20px;
  padding: 5px 0;
}
label {
  cursor: pointer;
  display: flex;
  align-items: center;
}
input[type="checkbox"] {
  margin-right: 8px;
}