vue 实现无限级联动

实现无限级联动的核心思路

无限级联动通常指多层级联选择器，例如省市区选择或分类选择。Vue中可通过递归组件或动态数据加载实现。

递归组件实现方式

创建可递归调用的子组件，通过v-for渲染当前层级选项，并嵌套自身组件处理下一级数据。

<template>
  <div>
    <select v-model="selectedValue" @change="handleChange">
      <option v-for="item in options" :value="item.value">{{ item.label }}</option>
    </select>
    <child-select 
      v-if="nextOptions.length"
      :options="nextOptions"
      @select="handleChildSelect"
    />
  </div>
</template>

<script>
export default {
  name: 'ChildSelect',
  props: ['options'],
  data() {
    return {
      selectedValue: '',
      nextOptions: []
    }
  },
  methods: {
    handleChange() {
      const selected = this.options.find(item => item.value === this.selectedValue)
      this.nextOptions = selected?.children || []
      this.$emit('select', this.selectedValue)
    },
    handleChildSelect(val) {
      this.$emit('select', val)
    }
  }
}
</script>

动态数据加载实现

通过API异步加载各级数据，适合大数据量场景。

export default {
  data() {
    return {
      levels: [
        { options: [], selected: null },
        { options: [], selected: null }
      ]
    }
  },
  methods: {
    async loadOptions(levelIndex, parentId) {
      const res = await api.getOptions(parentId)
      this.levels[levelIndex].options = res.data
      // 清空后续层级选择
      for (let i = levelIndex + 1; i < this.levels.length; i++) {
        this.levels[i].selected = null
        this.levels[i].options = []
      }
    },
    handleSelect(levelIndex, value) {
      this.levels[levelIndex].selected = value
      if (levelIndex < this.levels.length - 1) {
        this.loadOptions(levelIndex + 1, value)
      }
    }
  },
  created() {
    this.loadOptions(0)
  }
}

使用现成组件库

Element UI等库提供现成的级联选择器组件：

<el-cascader
  :options="options"
  :props="{ checkStrictly: true }"
  @change="handleChange"
></el-cascader>

性能优化建议

对于大数据量场景，建议采用虚拟滚动技术。可考虑使用第三方库如vue-virtual-scroller。

import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller }
}

注意事项

组件间通信建议使用Vuex管理状态，避免深层prop传递。动态层级数量可通过v-for配合数组长度控制。