联动666-CSDN博客

本文链接：https://blog.csdn.net/weixin_56505811/article/details/130098207

该代码示例展示了如何在Vue.js中使用el-select组件创建两个联动的下拉菜单。当valueOne的值改变时，changeFn方法会更新valueTwo的选项列表，根据valueOne的值从optionsTwoArr获取相应的二级选项。

摘要由CSDN通过智能技术生成

<template>
  <div class="test">
    <div>
      <el-select v-model="valueOne" @change="changeFn">
        <el-option
          v-for="item in optionsOne"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select v-model="valueTwo">
        <el-option
          v-for="item in optionsTwo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      valueOne: "",
      valueTwo: "",
      optionsOne: [
        { label: "亳州", value: 3423 },
        { label: "宿州", value: 3424 },
      ],
      optionsTwo: [],
      optionsTwoArr: [
        {
          pValue: "3423",
          twoOption: [
            { label: "利辛县", value: 342324 },
            { label: "涡阳县", value: 342326 },
          ],
        },
        {
          pValue: "3424",
          twoOption: [
            { label: "砺山县", value: 342425 },
            { label: "泗县", value: 342424 },
          ],
        },
      ],
    };
  },
  methods: {
    changeFn(val) {
      this.optionsTwoArr.forEach((item) => {
        if (item.pValue == val) {
          this.optionsTwo = item.twoOption;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>