vue select级联绑定值

Question

vue element 级联绑定select

<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="活动区域">
        <el-select v-model="value" placeholder="请选择一级菜单">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择二级菜单">
          <el-option
            v-for="(item2, index) in options.items"
            :key="index"
            :label="item2.name"
            :value="item2.key"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      options: [
        {
          key: "shejiyuanze",
          name: "设计原则",
          items: [
            {
              key: "yizhi",
              name: "一致"
            },
            {
              key: "fankui",
              name: "反馈"
            },
            {
              key: "xiaolv",
              name: "效率"
            }
          ]
        },
        {
          key: "daohang",
          name: "导航",
          items: [
            {
              key: "cexiangdaohang",
              name: "侧向导航"
            },
            {
              key: "dingbudaohang",
              name: "顶部导航"
            }
          ]
        },
        {
          key: "form",
          name: "表格",
          items: [
            {
              key: "radio",
              name: "Radio 单选框"
            },
            {
              key: "checkbox",
              name: "Checkbox 多选框"
            },
            {
              key: "input",
              name: "Input 输入框"
            }
          ]
        }
      ]
    };
  }
};
</script>

期待的结果如下图，选择第一项的时候，第二个选择框出现第一项下的内容，选择第二项的时候第二个选择框出现第二项的内容

Answer 1

使用watch进行监听，第一个下拉框的值，当第一个下拉框的值发生变化，就去循环数据源，拿到对应的数据填充到第二个下拉框中，就可以啦