当前位置：首页 > VUE

Vue实现级联多选

2026-01-15 03:28:51VUE

Vue 实现级联多选的方法

使用 Element UI 的 Cascader 组件

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

安装 Element UI：

npm install element-ui

代码示例：

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            { value: 'shejiyuanze', label: '设计原则' },
            { value: 'daohang', label: '导航' }
          ]
        }
      ],
      props: {
        multiple: true,
        checkStrictly: true // 允许选择任意一级
      }
    };
  }
};
</script>

使用 Ant Design Vue 的 Cascader 组件

Ant Design Vue 的 a-cascader 组件也支持多选功能，通过设置 multiple 属性即可。

安装 Ant Design Vue：

npm install ant-design-vue

代码示例：

<template>
  <a-cascader
    v-model="selectedOptions"
    :options="options"
    multiple
    placeholder="请选择"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            { value: 'hangzhou', label: '杭州' },
            { value: 'ningbo', label: '宁波' }
          ]
        }
      ]
    };
  }
};
</script>

自定义实现级联多选

如果需要更灵活的控制，可以自定义实现级联多选功能。通过递归组件和动态加载数据的方式实现。

代码示例：

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

<script>
export default {
  name: 'CascaderMulti',
  props: {
    options: Array,
    value: Array
  },
  computed: {
    selectedValues: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
};
</script>

动态加载数据

对于大数据量的级联选择，可以采用动态加载数据的方式优化性能。

代码示例：

Vue实现级联多选

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

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