elementUI两个select单选框联动

在Element UI中，可以通过监听一个Select组件的变化来实现与另一个Select组件的联动。以下是一个简单的例子，演示了如何实现两个Select单选框的联动：

<template>
  <el-row>
    <el-col :span="12">
      <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-col>
    <el-col :span="12">
      <el-select v-model="selectedSubcategory" placeholder="请选择子分类">
        <el-option
          v-for="subcategory in subcategories"
          :key="subcategory"
          :label="subcategory"
          :value="subcategory">
        </el-option>
      </el-select>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      selectedCategory: '',
      selectedSubcategory: '',
      categories: [
        { label: '电子产品', value: 'electronics' },
        { label: '家居用品', value: 'homewares' }
      ],
      subcategories: {
        electronics: ['电脑', '手机', '电视'],
        homewares: ['床单', '沙发', '桌椅']
      }
    };
  },
  methods: {
    categoryChanged(value) {
      this.selectedSubcategory = '';
      this.subcategories = this.subcategories[value] || [];
    }
  }
};
</script>

在这个例子中，有两个Select组件，第一个是分类选择，第二个是子分类选择。当分类变化时（即监听@change事件），子分类的选项会更新，实现联动效果。categoryChanged方法会根据选择的分类值更新子分类数组，并将选定的子分类重置。