vue实现联动菜单

实现联动菜单的基本思路

在Vue中实现联动菜单的核心在于数据绑定和事件监听。通过v-model绑定下拉菜单的值，利用watch或computed监听变化，动态更新下一级菜单的选项。

基础实现方法

创建父子组件或单一组件管理联动逻辑。父组件维护所有菜单数据，子组件负责渲染和选择。

<template>
  <div>
    <select v-model="selectedProvince" @change="handleProvinceChange">
      <option v-for="province in provinces" :value="province.id">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity">
      <option v-for="city in cities" :value="city.id">{{ city.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [
        {id: 1, name: '北京'},
        {id: 2, name: '上海'}
      ],
      cities: [],
      selectedProvince: '',
      selectedCity: ''
    }
  },
  methods: {
    handleProvinceChange() {
      this.cities = this.getCitiesByProvince(this.selectedProvince)
      this.selectedCity = ''
    },
    getCitiesByProvince(provinceId) {
      // 实际项目中这里应该是API请求或本地数据查询
      const cityData = {
        1: [{id: 101, name: '朝阳区'}, {id: 102, name: '海淀区'}],
        2: [{id: 201, name: '浦东新区'}, {id: 202, name: '徐汇区'}]
      }
      return cityData[provinceId] || []
    }
  }
}
</script>

使用计算属性优化

对于静态数据，可以使用计算属性替代watch，减少代码量。

computed: {
  cities() {
    return this.getCitiesByProvince(this.selectedProvince)
  }
}

多级联动实现

对于三级或更多级联动的场景，可以采用递归组件或动态组件的方式实现。

<template>
  <div>
    <cascade-select 
      v-model="selectedValues"
      :options="options"
      :level="0"
    />
  </div>
</template>

<script>
import CascadeSelect from './CascadeSelect.vue'

export default {
  components: { CascadeSelect },
  data() {
    return {
      selectedValues: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                { value: 'xihu', label: '西湖区' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方组件库

对于复杂需求，可以考虑使用现成的组件库如Element UI的Cascader级联选择器。

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [{
        value: 'guide',
        label: 'Guide',
        children: [{
          value: 'disciplines',
          label: 'Disciplines'
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

异步加载数据

当菜单数据需要从接口异步获取时，可以使用lazy-load模式。

methods: {
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 })
        .map(item => ({
          value: ++id,
          label: `选项${id}`,
          leaf: level >= 2
        }))
      resolve(nodes)
    }, 1000)
  }
}

表单验证集成

在表单中使用联动菜单时，通常需要配合验证规则。

rules: {
  selectedOptions: [
    { required: true, message: '请选择', trigger: 'change' }
  ]
}

以上方法涵盖了从基础到高级的Vue联动菜单实现方案，开发者可根据项目需求选择适合的方式。对于简单场景，原生实现足够；复杂场景推荐使用成熟的UI组件库，减少开发成本。