当前位置：首页 > VUE

vue实现级联

2026-01-12 18:08:31VUE

Vue 实现级联选择器

使用 Vue 实现级联选择器可以通过 el-cascader 组件（Element UI）或自定义递归组件完成。以下是两种常见实现方式：

使用 Element UI 的 el-cascader

安装 Element UI 后直接调用级联组件：

npm install element-ui

模板中配置数据与事件：

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

数据与事件处理：

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

自定义递归组件

创建递归组件 CascadeItem.vue：

<template>
  <div>
    <select v-model="selectedValue" @change="onChange">
      <option v-for="item in list" :value="item.value">
        {{ item.label }}
      </option>
    </select>
    <cascade-item 
      v-if="childList.length"
      :list="childList"
      @change="handleChildChange"
    />
  </div>
</template>

组件逻辑：

export default {
  name: 'CascadeItem',
  props: ['list'],
  data() {
    return {
      selectedValue: '',
      childList: []
    }
  },
  methods: {
    onChange(e) {
      const val = e.target.value
      this.childList = this.list.find(item => item.value === val)?.children || []
      this.$emit('change', val)
    },
    handleChildChange(val) {
      this.$emit('change', `${this.selectedValue},${val}`)
    }
  }
}

动态加载数据

对于异步数据场景，可通过 lazy 模式实现：

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

配置懒加载方法：

export default {
  data() {
    return {
      lazyProps: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node
          const res = await fetchOptions(level)
          resolve(res.data)
        }
      }
    }
  }
}