当前位置：首页 > VUE

vue级联选择怎么实现

2026-02-20 17:15:28VUE

实现Vue级联选择的方法

在Vue中实现级联选择通常可以通过以下方式完成，具体取决于项目需求和使用的UI库。

使用Element UI的Cascader组件

安装Element UI后，直接使用el-cascader组件即可实现级联选择功能。需要准备嵌套结构的数据，并通过props配置项指定数据字段名。

vue级联选择怎么实现

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="props"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      props: {
        label: 'label',
        value: 'value',
        children: 'children'
      },
      options: [{
        value: 'zhejiang',
        label: '浙江省',
        children: [{
          value: 'hangzhou',
          label: '杭州市',
          children: [{
            value: 'xihu',
            label: '西湖区'
          }]
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

使用Ant Design Vue的Cascader

Ant Design Vue同样提供了a-cascader组件，实现方式类似。需要安装ant-design-vue库并引入组件。

vue级联选择怎么实现

<template>
  <a-cascader
    v-model:value="value"
    :options="options"
    placeholder="请选择"
    @change="onChange"
  />
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const value = ref([])
    const options = [
      {
        value: 'zhejiang',
        label: '浙江',
        children: [
          {
            value: 'hangzhou',
            label: '杭州',
            children: [
              {
                value: 'xihu',
                label: '西湖'
              }
            ]
          }
        ]
      }
    ]
    const onChange = (value) => {
      console.log(value)
    }
    return {
      value,
      options,
      onChange
    }
  }
}
</script>

自定义级联选择

如果需要完全自定义实现，可以通过递归组件或动态加载数据的方式构建级联选择器。以下是一个简单的递归组件示例：

<template>
  <div>
    <select v-model="selectedRegion" @change="loadChildren">
      <option value="">请选择</option>
      <option v-for="item in regions" :value="item.id">{{ item.name }}</option>
    </select>
    <RegionSelect 
      v-if="children.length > 0" 
      :regions="children" 
      @selected="handleChildSelected"
    />
  </div>
</template>

<script>
export default {
  name: 'RegionSelect',
  props: {
    regions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedRegion: '',
      children: []
    }
  },
  methods: {
    loadChildren() {
      // 根据selectedRegion加载子级数据
      this.children = this.getChildren(this.selectedRegion)
    },
    handleChildSelected(value) {
      this.$emit('selected', [this.selectedRegion, ...value])
    }
  }
}
</script>

动态加载数据

对于大数据量的级联选择，可以采用动态加载的方式，当用户选择某一级时再去加载下一级数据。

<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((_, i) => ({
                value: `${level}-${i}`,
                label: `选项 ${level}-${i}`,
                leaf: level >= 2
              }))
            resolve(nodes)
          }, 1000)
        }
      }
    }
  }
}
</script>