当前位置：首页 > VUE

vue如何实现级联

2026-01-15 23:37:11VUE

实现级联选择器的基本方法

在Vue中实现级联选择器通常使用现成的组件库或自定义组件。以下是两种常见方式：

使用Element UI的Cascader组件 安装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: 'province',
        label: '省份',
        children: [{
          value: 'city',
          label: '城市'
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

使用Ant Design Vue的Cascader 类似地，Ant Design Vue也提供级联组件：

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

自定义级联选择器实现

如果需要完全自定义实现，可以组合使用多个select元素并通过数据联动实现：

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

  <select v-model="selectedCity" :disabled="!selectedProvince">
    <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
  </select>
</template>

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

动态加载数据方案

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

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

<script>
export default {
  data() {
    return {
      dynamicProps: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          // 根据level异步加载数据
          setTimeout(() => {
            resolve([
              { value: 1, label: '一级选项' }
            ])
          }, 1000)
        }
      }
    }
  }
}
</script>

表单验证集成

级联选择器通常需要与表单验证配合：

<el-form :model="form" :rules="rules">
  <el-form-item label="地区" prop="region">
    <el-cascader v-model="form.region" :options="options"/>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: { region: [] },
      rules: {
        region: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ]
      }
    }
  }
}
</script>