当前位置：首页 > VUE

Vue实现级联多选

2026-03-08 06:10:40VUE

Vue实现级联多选的方法

使用Element UI的Cascader组件

Element UI提供了el-cascader组件，支持级联选择功能。通过配置props属性可以自定义节点渲染和选中逻辑。以下是一个基础示例：

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [
            { value: 'design', label: 'Design' },
            { value: 'development', label: 'Development' }
          ]
        }
      ]
    };
  }
};
</script>

自定义递归组件

如果需要更灵活的定制，可以手动实现递归组件。创建一个可复用的CascadeSelect组件：

Vue实现级联多选

<template>
  <div class="cascade-select">
    <div v-for="item in data" :key="item.value">
      <input 
        type="checkbox" 
        v-model="selectedValues" 
        :value="item.value"
      >
      <span @click="toggleExpand(item)">{{ item.label }}</span>
      <div v-if="item.expanded && item.children">
        <CascadeSelect 
          :data="item.children"
          :selectedValues.sync="selectedValues"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CascadeSelect',
  props: {
    data: Array,
    selectedValues: Array
  },
  methods: {
    toggleExpand(item) {
      this.$set(item, 'expanded', !item.expanded);
    }
  }
};
</script>

使用Vuex管理状态

对于复杂级联数据，建议使用Vuex集中管理选中状态：

Vue实现级联多选

// store.js
const store = new Vuex.Store({
  state: {
    cascadeSelections: []
  },
  mutations: {
    updateSelection(state, payload) {
      state.cascadeSelections = payload;
    }
  }
});

// 组件内
this.$store.commit('updateSelection', newSelectedValues);

性能优化技巧

对于大数据量的级联选择，可采用虚拟滚动或动态加载子节点：

async loadChildren(node, resolve) {
  const { level } = node;
  const result = await api.getChildren(level);
  resolve(result);
}

样式定制建议

通过CSS覆盖或使用scoped slots自定义节点渲染：

<el-cascader>
  <template slot-scope="{ node, data }">
    <span>{{ data.label }}</span>
    <i v-if="node.isLeaf" class="icon"></i>
  </template>
</el-cascader>