vue如何实现级联

Vue 实现级联选择器的方法

使用 Element UI 的 Cascader 组件

Element UI 提供了 el-cascader 组件，支持多级联动选择。安装 Element UI 后，可以直接使用该组件。

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'province1',
          label: 'Province 1',
          children: [
            {
              value: 'city1',
              label: 'City 1',
              children: [
                {
                  value: 'district1',
                  label: 'District 1'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

使用 Ant Design Vue 的 Cascader 组件

Ant Design Vue 也提供了 a-cascader 组件，功能与 Element UI 类似。

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'province1',
          label: 'Province 1',
          children: [
            {
              value: 'city1',
              label: 'City 1',
              children: [
                {
                  value: 'district1',
                  label: 'District 1'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

自定义级联选择器

如果不想依赖第三方库，可以手动实现级联选择器。通过动态加载数据的方式实现多级联动。

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

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinces: [
        { value: 'p1', label: 'Province 1' },
        { value: 'p2', label: 'Province 2' }
      ],
      cities: [],
      districts: []
    };
  },
  methods: {
    loadCities() {
      this.cities = [
        { value: 'c1', label: 'City 1' },
        { value: 'c2', label: 'City 2' }
      ];
      this.selectedCity = '';
      this.districts = [];
    },
    loadDistricts() {
      this.districts = [
        { value: 'd1', label: 'District 1' },
        { value: 'd2', label: 'District 2' }
      ];
    }
  }
};
</script>

动态加载数据

对于数据量较大的场景，可以通过接口动态加载级联数据。

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

注意事项

• 确保数据结构符合组件要求，通常需要 value、label 和 children 字段。
• 动态加载数据时，注意处理异步请求的状态和错误。
• 对于复杂的级联逻辑，可以通过计算属性或监听器实现。

以上方法可以根据项目需求选择适合的实现方式。