当前位置：首页 > VUE

Vue实现级联多选

2026-03-28 16:49:25VUE

Vue 实现级联多选的方法

使用 Element UI 的 Cascader 组件

Element UI 提供了 el-cascader 组件，支持多选功能。通过设置 props 的 multiple 属性为 true 即可启用多选。

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ multiple: true }"
    clearable
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [
            {
              value: 'disciplines',
              label: 'Disciplines'
            }
          ]
        }
      ]
    }
  }
}
</script>

自定义级联多选组件

如果需要更灵活的定制，可以手动实现级联多选逻辑。通过递归渲染子菜单，并绑定选中状态。

Vue实现级联多选

<template>
  <div>
    <div v-for="item in options" :key="item.value">
      <input 
        type="checkbox" 
        v-model="selectedValues" 
        :value="item.value"
      />
      <span>{{ item.label }}</span>
      <div v-if="item.children" style="margin-left: 20px">
        <cascade-multi-select 
          :options="item.children" 
          v-model="selectedValues"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CascadeMultiSelect',
  props: {
    options: Array,
    value: Array
  },
  data() {
    return {
      selectedValues: this.value || []
    }
  },
  watch: {
    selectedValues(newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>

使用第三方库 vue-treeselect

vue-treeselect 是一个功能强大的树形选择组件，支持多选和级联操作。

安装依赖：

Vue实现级联多选

npm install @riophae/vue-treeselect

示例代码：

<template>
  <treeselect
    v-model="value"
    :multiple="true"
    :options="options"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [
        {
          id: 'a',
          label: 'a',
          children: [
            { id: 'aa', label: 'aa' }
          ]
        }
      ]
    }
  }
}
</script>

处理异步加载数据

如果级联数据需要异步加载，可以通过 lazy 属性和 lazyLoad 方法实现。

<template>
  <el-cascader
    v-model="selectedOptions"
    :props="props"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
              .map(() => ({
                value: ++id,
                label: `Option - ${id}`,
                leaf: level >= 2
              }))
            resolve(nodes)
          }, 1000)
        }
      }
    }
  }
}
</script>