vue实现级联

Vue 实现级联选择器的方法

级联选择器（Cascader）是常见的表单组件，用于处理多层级联动数据选择（如省市区选择）。以下是几种实现方式：

基于 Element UI 的 el-cascader 组件

安装 Element UI 后可直接使用封装好的级联组件：

npm install element-ui

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [{
        value: 'jiangsu',
        label: '江苏',
        children: [{
          value: 'nanjing',
          label: '南京'
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

自定义递归组件实现

通过递归组件实现无限层级级联：

<!-- CascaderItem.vue -->
<template>
  <div>
    <select v-model="selectedValue" @change="onChange">
      <option v-for="item in data" :value="item.value">
        {{ item.label }}
      </option>
    </select>
    <cascader-item 
      v-if="childData.length"
      :data="childData"
      @change="handleChildChange">
    </cascader-item>
  </div>
</template>

<script>
export default {
  name: 'CascaderItem',
  props: ['data'],
  data() {
    return {
      selectedValue: '',
      childData: []
    }
  },
  methods: {
    onChange(e) {
      const selected = this.data.find(item => item.value === e.target.value);
      this.childData = selected.children || [];
      this.$emit('change', selected);
    },
    handleChildChange(val) {
      this.$emit('change', val);
    }
  }
}
</script>

使用第三方库 vue-cascader

专为 Vue 设计的轻量级级联组件：

npm install vue-cascader

<template>
  <vue-cascader
    :data="options"
    :model.sync="selectedValues"
    placeholder="请选择">
  </vue-cascader>
</template>

<script>
import VueCascader from 'vue-cascader';
export default {
  components: { VueCascader },
  data() {
    return {
      selectedValues: [],
      options: [{
        id: 1,
        name: '一级选项',
        children: [{
          id: 2,
          name: '二级选项'
        }]
      }]
    }
  }
}
</script>

动态加载数据

实现懒加载级联数据：

<template>
  <el-cascader
    :props="props"
    v-model="selectedOptions">
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
          const result = await fetch(`/api/data?level=${level}`);
          resolve(result.data);
        }
      }
    }
  }
}
</script>

关键注意事项

• 数据结构需保持一致性，建议格式：

  

  {
    value: 'id',
    label: '显示文本',
    children: [/* 子项 */]
  }

• 多选模式需设置 props.multiple = true

• 禁用选项可通过 disabled: true 属性控制

• 样式覆盖建议使用深度选择器：

  ::v-deep .el-cascader-menu {
    width: 200px;
  }

以上方案可根据项目需求选择，Element UI 方案适合快速开发，自定义组件更适合特殊交互需求。