实现ElementUI中两个Select选择联动效果

在Vue.js中使用ElementUI实现两个Select选择器之间的联动效果，可以通过监听一个Select选择器的变化来更新另一个Select选择器的选项。以下是一个简单的例子：

<template>
  <div>
    <el-select v-model="selectedCategory" placeholder="请选择分类" @change="categoryChanged">
      <el-option
        v-for="category in categories"
        :key="category.value"
        :label="category.label"
        :value="category.value">
      </el-option>
    </el-select>
    <el-select v-model="selectedSubcategory" placeholder="请选择子分类">
      <el-option
        v-for="subcategory in subcategories"
        :key="subcategory.value"
        :label="subcategory.label"
        :value="subcategory.value">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedCategory: '',
      selectedSubcategory: '',
      categories: [
        { label: '电子产品', value: 'electronics' },
        { label: '家居用品', value: 'homewares' }
      ],
      subcategories: []
    };
  },
  methods: {
    categoryChanged(value) {
      if (value === 'electronics') {
        this.subcategories = [
          { label: '电视', value: 'tv' },
          { label: '手机', value: 'phone' }
        ];
      } else if (value === 'homewares') {
        this.subcategories = [
          { label: '床单', value: 'bedsheet' },
          { label: '沙发', value: 'sofa' }
        ];
      } else {
        this.subcategories = [];
      }
    }
  }
};
</script>

在这个例子中，有两个Select选择器，第一个是分类选择器，第二个是子分类选择器。当用户在分类选择器中选择一个分类时，会触发@change事件，然后在Vue实例的methods中定义的categoryChanged方法会根据选择的分类更新子分类选择器的选项。