当前位置：首页 > VUE

vue实现select级联

2026-01-19 16:08:17VUE

实现 Vue Select 级联的基本方法

使用 Vue 实现级联选择器可以通过动态绑定数据和事件监听来实现。以下是一个基于 Vue 2 的实现示例。

模板部分

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

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

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

脚本部分

<script>
export default {
  data() {
    return {
      provinces: [
        { id: 1, name: '江苏省' },
        { id: 2, name: '浙江省' }
      ],
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    }
  },
  methods: {
    handleProvinceChange() {
      this.selectedCity = '';
      this.selectedDistrict = '';
      this.districts = [];

      // 模拟API请求获取城市数据
      if (this.selectedProvince === '1') {
        this.cities = [
          { id: 101, name: '南京市' },
          { id: 102, name: '苏州市' }
        ];
      } else if (this.selectedProvince === '2') {
        this.cities = [
          { id: 201, name: '杭州市' },
          { id: 202, name: '宁波市' }
        ];
      }
    },
    handleCityChange() {
      this.selectedDistrict = '';

      // 模拟API请求获取区县数据
      if (this.selectedCity === '101') {
        this.districts = [
          { id: 10101, name: '玄武区' },
          { id: 10102, name: '秦淮区' }
        ];
      }
      // 其他城市的数据处理...
    }
  }
}
</script>

使用 Element UI 的级联选择器

对于更复杂的场景，可以使用 Element UI 提供的 Cascader 组件。

安装 Element UI

npm install element-ui

使用示例

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'jiangsu',
          label: '江苏省',
          children: [
            {
              value: 'nanjing',
              label: '南京市',
              children: [
                { value: 'xuanwu', label: '玄武区' },
                { value: 'qinhuai', label: '秦淮区' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

动态加载数据的级联选择器

对于大数据量的级联选择，可以采用动态加载方式。

实现动态加载

methods: {
  loadData(node, resolve) {
    const { level } = node;

    // 根据层级加载不同数据
    setTimeout(() => {
      if (level === 0) {
        resolve([
          { value: 'jiangsu', label: '江苏省' },
          { value: 'zhejiang', label: '浙江省' }
        ]);
      } else if (level === 1) {
        if (node.value === 'jiangsu') {
          resolve([
            { value: 'nanjing', label: '南京市' },
            { value: 'suzhou', label: '苏州市' }
          ]);
        }
      }
    }, 500);
  }
}

模板中使用

<el-cascader
  :props="props"
></el-cascader>

<script>
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad: this.loadData
      }
    }
  }
}
</script>