vue select级联绑定值

小丑的帽子
  • 101
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>

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

clipboard.png

回复
阅读 3.5k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏