element 下拉框联动_element-ui select 二级联动

在 Element UI 中，我们可以使用 `<el-select>` 元素来实现下拉框联动。具体步骤如下：

1. 定义父级下拉框，以及子级下拉框。

<el-select v-model="parentValue" @change="parentChange">
  <el-option v-for="item in parentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

<el-select v-model="childValue">
  <el-option v-for="item in childOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

2. 定义父级下拉框的选项以及子级下拉框的选项。

data() {
  return {
    parentOptions: [
      {
        value: 'beijing',
        label: '北京'
      },
      {
        value: 'shanghai',
        label: '上海'
      }
    ],
    childOptions: {
      beijing: [
        {
          value: 'haidian',
          label: '海淀区'
        },
        {
          value: 'chaoyang',
          label: '朝阳区'
        }
      ],
      shanghai: [
        {
          value: 'pudong',
          label: '浦东新区'
        },
        {
          value: 'minhang',
          label: '闵行区'
        }
      ]
    },
    parentValue: '',
    childValue: ''
  }
}

3. 监听父级下拉框的选项变化，并根据选项的值改变子级下拉框的选项。

methods: {
  parentChange(value) {
    this.childOptions = this.childOptions[value];
    this.childValue = '';
  }
}

完整代码如下：

<template>
  <div>
    <el-select v-model="parentValue" @change="parentChange">
      <el-option v-for="item in parentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-select v-model="childValue">
      <el-option v-for="item in childOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentOptions: [
        {
          value: 'beijing',
          label: '北京'
        },
        {
          value: 'shanghai',
          label: '上海'
        }
      ],
      childOptions: {
        beijing: [
          {
            value: 'haidian',
            label: '海淀区'
          },
          {
            value: 'chaoyang',
            label: '朝阳区'
          }
        ],
        shanghai: [
          {
            value: 'pudong',
            label: '浦东新区'
          },
          {
            value: 'minhang',
            label: '闵行区'
          }
        ]
      },
      parentValue: '',
      childValue: ''
    }
  },
  methods: {
    parentChange(value) {
      this.childOptions = this.childOptions[value];
      this.childValue = '';
    }
  }
}
</script>