当前位置：首页 > VUE

vue实现级联

2026-01-07 17:44:59VUE

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 方案适合快速开发，自定义组件更适合特殊交互需求。

vue实现级联

标签: 级联 vue

分享给朋友：

vue实现导航栏切图

Vue 实现导航栏切图使用 Vue Router 实现基础导航在 Vue 项目中，可以通过 Vue Router 实现导航栏的路由切换。创建一个导航栏组件，并在其中使用 <router-li…

vue树形实现

Vue 树形组件实现方法使用递归组件实现树形结构递归组件是 Vue 中实现树形结构的常见方法。通过组件调用自身的方式，可以轻松构建多层嵌套的树形结构。 <template> &l…

vue实现setinterval

在 Vue 中使用 setInterval Vue 中可以通过生命周期钩子和方法结合 setInterval 实现定时任务。以下是一个完整的实现示例： <template> <…

vue实现tap

Vue 实现 Tap 事件在移动端开发中，Tap 事件比 Click 事件更常用，因为 Click 事件有 300ms 延迟。以下是几种在 Vue 中实现 Tap 事件的方法。使用第三方库安…

vue 实现折叠

Vue 实现折叠功能的方法在 Vue 中实现折叠功能可以通过多种方式完成，以下是几种常见的实现方法：使用 v-if 或 v-show 控制显示隐藏通过绑定一个布尔值变量，结合 v-if 或…

vue 实现$(id)

在 Vue 中实现类似 jQuery 的 $(id) 功能，可以通过以下几种方式操作 DOM 元素：使用 ref 属性 Vue 推荐使用 ref 属性来直接访问 DOM 元素或组件实例。在模板中为…

vue实现级联