当前位置：首页 > VUE

vue 实现级联

2026-03-07 01:05:18VUE

Vue 实现级联选择器

在Vue中实现级联选择器（Cascader）通常可以通过以下方法完成：

使用Element UI或Ant Design Vue组件库

这两个流行的UI库都提供了现成的级联选择器组件，开箱即用。

Element UI示例代码：

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则'
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

Ant Design Vue示例代码：

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

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

自定义实现级联选择器

如果需要完全自定义实现，可以基于Vue的组件系统构建：

<template>
  <div class="cascader">
    <select v-model="selectedProvince" @change="loadCities">
      <option value="">选择省份</option>
      <option v-for="province in provinces" :value="province.id">
        {{ province.name }}
      </option>
    </select>

    <select v-model="selectedCity" @change="loadDistricts" :disabled="!selectedProvince">
      <option value="">选择城市</option>
      <option v-for="city in cities" :value="city.id">
        {{ city.name }}
      </option>
    </select>

    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option value="">选择区县</option>
      <option v-for="district in districts" :value="district.id">
        {{ district.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    }
  },
  mounted() {
    this.fetchProvinces()
  },
  methods: {
    fetchProvinces() {
      // API调用获取省份数据
    },
    loadCities() {
      // 根据selectedProvince获取城市数据
    },
    loadDistricts() {
      // 根据selectedCity获取区县数据
    }
  }
}
</script>

使用Vuex管理级联状态

对于复杂应用，可以使用Vuex集中管理级联选择器的状态：

// store.js
export default new Vuex.Store({
  state: {
    cascader: {
      provinces: [],
      cities: [],
      districts: [],
      selected: {
        province: null,
        city: null,
        district: null
      }
    }
  },
  mutations: {
    SET_PROVINCES(state, provinces) {
      state.cascader.provinces = provinces
    },
    SET_CITIES(state, cities) {
      state.cascader.cities = cities
    },
    // 其他mutations...
  },
  actions: {
    fetchProvinces({ commit }) {
      // API调用
    },
    // 其他actions...
  }
})

异步加载数据实现

对于大数据量的级联选择，可以实现异步加载：

vue 实现级联

methods: {
  async loadData(selectedOptions) {
    const targetOption = selectedOptions[selectedOptions.length - 1]
    targetOption.loading = true

    try {
      const res = await api.fetchData(targetOption.value)
      targetOption.children = res.data
    } finally {
      targetOption.loading = false
    }
  }
}