当前位置：首页 > VUE

vue 实现级联

2026-02-10 01:14:55VUE

实现级联选择器的基本思路

在Vue中实现级联选择器通常涉及组件间的数据传递和状态管理。核心是通过父子组件通信或集中式状态管理（如Vuex）来同步各级选项的数据。

使用原生select与v-model

对于简单级联，可通过v-model绑定数据，利用@change事件触发下一级选项的更新：

vue 实现级联

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCities">
      <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
    </select>

    <select v-model="selectedCity" @change="loadDistricts">
      <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
    </select>

    <select v-model="selectedDistrict">
      <option v-for="d in districts" :value="d.id">{{ d.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      selectedProvince: null,
      selectedCity: null,
      selectedDistrict: null
    }
  },
  methods: {
    loadCities() {
      this.cities = getCitiesByProvince(this.selectedProvince)
      this.selectedCity = null
      this.districts = []
    },
    loadDistricts() {
      this.districts = getDistrictsByCity(this.selectedCity)
    }
  }
}
</script>

使用第三方组件库

主流UI库如Element UI、Ant Design Vue等提供现成的级联组件：

Element UI示例：

vue 实现级联

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

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

动态加载数据

对于大数据量场景，可采用异步加载方式：

methods: {
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 })
        .map(item => ({
          value: ++id,
          label: `选项${id}`,
          leaf: level >= 2
        }))
      resolve(nodes)
    }, 1000)
  }
}

自定义级联组件

如需高度定制，可自行实现递归组件：

<template>
  <div class="cascader">
    <div 
      v-for="(item, index) in currentLevel" 
      :key="index"
      @click="selectItem(item)"
    >
      {{ item.label }}
    </div>
    <cascader-panel 
      v-if="selectedItem && selectedItem.children"
      :data="selectedItem.children"
    />
  </div>
</template>

<script>
export default {
  name: 'CascaderPanel',
  props: ['data'],
  data() {
    return {
      selectedItem: null
    }
  },
  computed: {
    currentLevel() {
      return this.data || []
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    }
  }
}
</script>