vue实现及联

Vue 实现级联选择

级联选择（Cascader）是一种常见的前端交互组件，适用于省市区选择、分类选择等场景。以下是基于 Vue 2 或 Vue 3 的实现方法。

使用 Element UI 或 Ant Design Vue 的现成组件

对于 Vue 2 项目，可以使用 Element UI 的 el-cascader 组件：

<template>
  <el-cascader
    v-model="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>

对于 Vue 3 项目，可以使用 Ant Design Vue 的 a-cascader 组件：

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

<script>
import { ref } from 'vue'
export default {
  setup() {
    const selectedOptions = ref([])
    const options = [
      {
        value: 'zhejiang',
        label: '浙江省',
        children: [
          {
            value: 'hangzhou',
            label: '杭州市',
            children: [
              { value: 'xihu', label: '西湖区' }
            ]
          }
        ]
      }
    ]

    const handleChange = (value) => {
      console.log(value)
    }

    return { selectedOptions, options, handleChange }
  }
}
</script>

自定义级联选择实现

如果需要完全自定义级联选择组件，可以通过递归组件实现：

<template>
  <div class="cascader">
    <select v-model="selectedLevel1" @change="handleLevel1Change">
      <option value="">请选择</option>
      <option v-for="item in level1Options" :value="item.value">
        {{ item.label }}
      </option>
    </select>

    <select v-model="selectedLevel2" @change="handleLevel2Change" v-if="level2Options.length">
      <option value="">请选择</option>
      <option v-for="item in level2Options" :value="item.value">
        {{ item.label }}
      </option>
    </select>

    <select v-model="selectedLevel3" v-if="level3Options.length">
      <option value="">请选择</option>
      <option v-for="item in level3Options" :value="item.value">
        {{ item.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedLevel1: '',
      selectedLevel2: '',
      selectedLevel3: '',
      level1Options: [
        { value: 'zhejiang', label: '浙江省' },
        { value: 'jiangsu', label: '江苏省' }
      ],
      level2Options: [],
      level3Options: [],
      allOptions: {
        zhejiang: [
          { value: 'hangzhou', label: '杭州市', children: [
            { value: 'xihu', label: '西湖区' },
            { value: 'xiacheng', label: '下城区' }
          ]},
          { value: 'ningbo', label: '宁波市' }
        ],
        jiangsu: [
          { value: 'nanjing', label: '南京市' },
          { value: 'suzhou', label: '苏州市' }
        ]
      }
    }
  },
  methods: {
    handleLevel1Change() {
      this.selectedLevel2 = ''
      this.selectedLevel3 = ''
      this.level2Options = this.allOptions[this.selectedLevel1] || []
      this.level3Options = []
    },
    handleLevel2Change() {
      this.selectedLevel3 = ''
      const selected = this.level2Options.find(
        item => item.value === this.selectedLevel2
      )
      this.level3Options = selected?.children || []
    }
  }
}
</script>

动态加载级联数据

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

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

注意事项

1. 数据结构要规范，通常需要包含 value、label 和 children 字段
2. 对于大数据量考虑使用懒加载
3. 移动端场景可能需要特殊处理交互方式
4. 可以结合后端 API 实现动态数据加载
5. 注意处理空值和初始化状态

以上方法涵盖了从使用现成组件到完全自定义实现的多种方案，可根据项目需求选择合适的方式。