当前位置：首页 > VUE

vue实现级联

2026-02-10 01:21:43VUE

Vue 实现级联选择器的方法

使用 Element UI 的 Cascader 组件

Element UI 提供了现成的级联选择器组件，适合快速集成到项目中。安装 Element UI 后，直接使用 el-cascader 组件即可。

<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>

使用 Ant Design Vue 的 Cascader 组件

Ant Design Vue 也提供了级联选择器组件，适用于遵循 Ant Design 规范的项目。

<template>
  <a-cascader
    v-model:value="selectedOptions"
    :options="options"
    @change="handleChange"
  />
</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>

手动实现级联选择器

如果需要完全自定义的级联选择器，可以通过动态加载数据的方式实现。

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCities">
      <option v-for="province in provinces" :value="province.id" :key="province.id">
        {{ province.name }}
      </option>
    </select>
    <select v-model="selectedCity" @change="loadDistricts" :disabled="!selectedProvince">
      <option v-for="city in cities" :value="city.id" :key="city.id">
        {{ city.name }}
      </option>
    </select>
    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option v-for="district in districts" :value="district.id" :key="district.id">
        {{ district.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinces: [
        { id: '1', name: '浙江省' }
      ],
      cities: [],
      districts: []
    };
  },
  methods: {
    loadCities() {
      this.cities = [
        { id: '101', name: '杭州市' }
      ];
      this.selectedCity = '';
      this.districts = [];
    },
    loadDistricts() {
      this.districts = [
        { id: '1001', name: '西湖区' }
      ];
    }
  }
};
</script>

动态加载数据

对于大数据量的级联选择，可以采用动态加载数据的方式，避免一次性加载所有数据。

vue实现级联

<template>
  <el-cascader
    v-model="selectedOptions"
    :props="props"
  ></el-cascader>
</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>