vue3 下拉框三级联动compute

可以考虑使用 `watch` 监听选中的值，并在回调函数中更新下一级的选项。

首先，定义三个数组用于存储选项：

data() {
  return {
    options1: [], // 第一级选项
    options2: [], // 第二级选项
    options3: [], // 第三级选项
    selected1: null, // 第一级选中的值
    selected2: null, // 第二级选中的值
    selected3: null // 第三级选中的值
  }
}

然后，在 `mounted` 钩子中初始化第一级选项：

mounted() {
  // 初始化第一级选项
  this.options1 = [
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 }
  ]
}

接下来，使用 `watch` 监听第一级选中的值，并根据选中的值动态更新第二级选项：

watch: {
  // 监听第一级选中的值
  selected1(newValue) {
    // 根据选中的值动态更新第二级选项
    if (newValue === 1) {
      this.options2 = [
        { label: '选项1-1', value: 11 },
        { label: '选项1-2', value: 12 },
        { label: '选项1-3', value: 13 }
      ]
    } else if (newValue === 2) {
      this.options2 = [
        { label: '选项2-1', value: 21 },
        { label: '选项2-2', value: 22 },
        { label: '选项2-3', value: 23 }
      ]
    } else if (newValue === 3) {
      this.options2 = [
        { label: '选项3-1', value: 31 },
        { label: '选项3-2', value: 32 },
        { label: '选项3-3', value: 33 }
      ]
    } else {
      this.options2 = []
    }
    // 重置第二级和第三级选中的值
    this.selected2 = null
    this.selected3 = null
  }
}

最后，再使用 `watch` 监听第二级选中的值，并根据选中的值动态更新第三级选项：

watch: {
  // 监听第二级选中的值
  selected2(newValue) {
    // 根据选中的值动态更新第三级选项
    if (newValue === 11) {
      this.options3 = [
        { label: '选项1-1-1', value: 111 },
        { label: '选项1-1-2', value: 112 },
        { label: '选项1-1-3', value: 113 }
      ]
    } else if (newValue === 12) {
      this.options3 = [
        { label: '选项1-2-1', value: 121 },
        { label: '选项1-2-2', value: 122 },
        { label: '选项1-2-3', value: 123 }
      ]
    } else if (newValue === 13) {
      this.options3 = [
        { label: '选项1-3-1', value: 131 },
        { label: '选项1-3-2', value: 132 },
        { label: '选项1-3-3', value: 133 }
      ]
    } else if (newValue === 21) {
      this.options3 = [
        { label: '选项2-1-1', value: 211 },
        { label: '选项2-1-2', value: 212 },
        { label: '选项2-1-3', value: 213 }
      ]
    } else if (newValue === 22) {
      this.options3 = [
        { label: '选项2-2-1', value: 221 },
        { label: '选项2-2-2', value: 222 },
        { label: '选项2-2-3', value: 223 }
      ]
    } else if (newValue === 23) {
      this.options3 = [
        { label: '选项2-3-1', value: 231 },
        { label: '选项2-3-2', value: 232 },
        { label: '选项2-3-3', value: 233 }
      ]
    } else if (newValue === 31) {
      this.options3 = [
        { label: '选项3-1-1', value: 311 },
        { label: '选项3-1-2', value: 312 },
        { label: '选项3-1-3', value: 313 }
      ]
    } else if (newValue === 32) {
      this.options3 = [
        { label: '选项3-2-1', value: 321 },
        { label: '选项3-2-2', value: 322 },
        { label: '选项3-2-3', value: 323 }
      ]
    } else if (newValue === 33) {
      this.options3 = [
        { label: '选项3-3-1', value: 331 },
        { label: '选项3-3-2', value: 332 },
        { label: '选项3-3-3', value: 333 }
      ]
    } else {
      this.options3 = []
    }
    // 重置第三级选中的值
    this.selected3 = null
  }
}

最终，将三个下拉框组件化，并绑定选中的值即可：

<template>
  <div>
    <select v-model="selected1">
      <option value="">请选择第一级</option>
      <option v-for="option in options1" :value="option.value">{{option.label}}</option>
    </select>
    <select v-model="selected2">
      <option value="">请选择第二级</option>
      <option v-for="option in options2" :value="option.value">{{option.label}}</option>
    </select>
    <select v-model="selected3">
      <option value="">请选择第三级</option>
      <option v-for="option in options3" :value="option.value">{{option.label}}</option>
    </select>
  </div>
</template>