vue实现联动 get

Vue 实现联动选择器的方法

数据绑定与监听 在 Vue 中实现联动选择器，通常需要使用 v-model 绑定数据，并通过 watch 监听父级选择器的变化。当父级选择器值变化时，动态更新子级选择器的选项。

data() {
  return {
    parentValue: '',
    childValue: '',
    childOptions: []
  }
},
watch: {
  parentValue(newVal) {
    this.childOptions = this.getChildOptions(newVal)
    this.childValue = '' // 重置子级选择
  }
}

异步加载选项 如果子级选项需要从后端获取，可以在监听器中调用异步方法：

watch: {
  async parentValue(newVal) {
    this.childOptions = await fetchChildOptions(newVal)
  }
}

使用计算属性 对于简单的联动逻辑，可以使用计算属性动态生成子级选项：

computed: {
  childOptions() {
    return this.optionsData[this.parentValue] || []
  }
}

表单验证联动 当需要验证联动选择器时，可以使用 Vue 的表单验证机制：

rules: {
  parentValue: [{ required: true }],
  childValue: [
    { required: true },
    { validator: (v) => this.childOptions.includes(v) }
  ]
}

第三方组件集成 使用 Element UI 等组件库时，可以直接利用其级联选择器组件：

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

多级联动实现 对于三级或更多级联选择，可以递归监听各级变化：

watch: {
  'level1': function() { /* 更新 level2 选项 */ },
  'level2': function() { /* 更新 level3 选项 */ }
}