当前位置：首页 > VUE

vue实现多级多选框

2026-02-20 22:55:00VUE

Vue 实现多级多选框

多级多选框的实现通常涉及递归组件或动态渲染，以下是两种常见方法：

递归组件实现

递归组件适合树形结构数据，通过组件自身调用自身实现无限层级。

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

<script>
export default {
  name: 'TreeCheckbox',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleChange(item) {
      this.$emit('change', item)
    },
    handleChildChange(childItem) {
      this.$emit('change', childItem)
    }
  }
}
</script>

动态渲染实现

通过嵌套循环实现固定层级的多选框，适合层级明确的数据结构。

<template>
  <div v-for="level1 in data" :key="level1.id">
    <input 
      type="checkbox" 
      v-model="level1.checked"
      @change="updateSelection(level1)"
    >
    <span>{{ level1.name }}</span>

    <div v-for="level2 in level1.children" :key="level2.id">
      <input 
        type="checkbox" 
        v-model="level2.checked"
        @change="updateSelection(level2)"
      >
      <span>{{ level2.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: 'Parent 1',
          checked: false,
          children: [
            { id: 11, name: 'Child 1-1', checked: false },
            { id: 12, name: 'Child 1-2', checked: false }
          ]
        }
      ]
    }
  },
  methods: {
    updateSelection(item) {
      console.log('Selected:', item)
    }
  }
}
</script>

父子联动逻辑

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

methods: {
  handleParentChange(parent) {
    if (parent.children) {
      parent.children.forEach(child => {
        child.checked = parent.checked
      })
    }
  },
  checkParentStatus(parent) {
    if (parent.children) {
      parent.checked = parent.children.every(child => child.checked)
    }
  }
}

数据格式示例

推荐使用统一的数据结构，便于递归处理。

const treeData = [
  {
    id: 1,
    label: 'Level 1',
    checked: false,
    children: [
      {
        id: 2,
        label: 'Level 2',
        checked: false,
        children: [
          { id: 3, label: 'Level 3', checked: false }
        ]
      }
    ]
  }
]

全选/全不选功能

添加顶级控制选项，实现一键全选或全不选。

<input 
  type="checkbox" 
  v-model="selectAll"
  @change="toggleAll"
>
<span>Select All</span>

data() {
  return {
    selectAll: false
  }
},
methods: {
  toggleAll() {
    const setChecked = (nodes) => {
      nodes.forEach(node => {
        node.checked = this.selectAll
        if (node.children) {
          setChecked(node.children)
        }
      })
    }
    setChecked(this.treeData)
  }
}

以上实现可根据实际需求调整，递归组件适合动态深度结构，而嵌套循环适合固定层级场景。父子联动逻辑需要根据业务需求定制，数据格式保持一致有助于维护。

vue实现多级多选框