【element-ui组件】el-select实现父子选择器联动

效果

选择父选择器 选项父1

选择父选择器 选项父2

代码

1. 父选择器数据 fatherOptions

const fatherOptions = [
    {
    value: 0,
    label: '父1'
    }, 
    {
    value: 1,
    label: '父2'
    }
]

2. 配置选择器 settingsOptions

const settingsOptions = [
  [
    {
      value:'选项1',
      label:'子1-1'
    },
    {
      value:'选项2',
      label:'子1-2'
    },
  ],
  [
    {
       value:'选项1',
       label:'子2-1'
    },
    {
       value:'选项2',
       label:'子2-2'
    }
  ]
]

4. 子选择器数据

根据父选择器数据和配置选择器的变化动态赋值

5. 完整代码

<template>
<el-row :gutter="10">
  <el-col :span="12">
   <el-form-item>
     <span>父选择器</span>
     <!-- change事件 -- 当选择器的值发生变化时触发 返回参数为value（0/1） -->
     <!-- 详情请看elementUI官方文档 -->
     <el-select @change="changeCurrent" v-model="fatherName">
         <el-option
           v-for="item in fatherOptions"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-select>
   </el-form-item>
  </el-col>
  <el-col :span="12">
   <el-form-item>
      <span>子选择器</span>
       <el-select v-model="sonName">
         <el-option
           v-for="item in sonOptions"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-select>
   </el-form-item>
  </el-col>
</el-row>
</template>

<script>
export default {
    data() {
    return {
      fatherName:'',
      sonName:'',
      fatherOptions:[
       {
        value: 0,
        label: '父1'
       }, 
       {
        value: 1,
        label: '父2'
       }
      ],
       settingsOptions:[
         [
           {
             value:'选项1',
             label:'子1-1'
            },
            {
             value:'选项2',
             label:'子1-2'
             },
         ],
         [
           {
             value:'选项1',
             label:'子2-1'
           },
           {
             value:'选项2',
             label:'子2-2'
           }
         ]
      ],
      sonOptions:[]
    };
    },
    methods: {
      // 父选择器发生变化 -- 子选择器重新赋值渲染
      // value设置为number类型 便于直接进行数组定位
      changeCurrent(value){
        this.sonOptions = this.settingsOptions[value]
        // this.sonName = this.sonOptions[0].value
      }
    },
    // 初始化子选择器数据sonOptions  避免出现空值
    mounted(){
      this.sonOptions = this.settingsOptions[0]
      // this.sonName = this.sonOptions[0].value
    }
 }
</script>