el-select下拉框实现双向联动_el-option二级联动

效果：

页面有下拉框A和B，

A、B的初始下拉框是所有的A和所有的B，

当A中选中A.X的时候，B中下拉框的内容更新为A.X对应的所有的B，

当B中选中B.X的时候，A中下拉框中的内容是所有的B.X对应的所有的A,

另外，当A或B中的内容被清空时，另外一个下拉框中的选项回复初始值，即所有的选项

表单部分：

——在el-select里面使用@change调用changeANameList不生效

更改为    在el-option里面使用@click.native调用

——使用@clear，实现下拉框内容被清除后，两个下拉框中选项恢复初始值

                  <el-form-item label="A名称" prop="aName">
                    <el-select v-model="queryParam.nameA" remote :remote-method="initAName" placeholder="" style="width: 100%;" clearable @clear="changeANameList('')" >
                      <el-option
                        v-for="item in aOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click.native="changeANameList(item.key)">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="B" prop="bName">
                    <el-select v-model="queryParam.bName" remote :remote-method="initbNmame" placeholder="" style="width: 100%;"  clearable @clear="changebNameList('')">
                      <el-option
                        v-for="item in bNameOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click.native="changebNameList(item.key)">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

调用的方法：initAName和initBName看具体的项目，考虑是在mounted里面调用还是在弹窗打开（open方法）的时候调用，或者两个都调用，目的是给两个下拉框赋初始值

目前项目状态：

mounted中不调用会出现弹窗打开下拉框内容为空

open中不调用会出现：每次打开弹窗下拉框A B中内容是空的，但下拉框选项是上一次的AB对应的

    initAName(name){
      let param={}
      if(!name){
        param={bName:''}
      }else{
        param={bName:name}
      }
//调用接口，注意接口传的是B的值，返回的是A的内容
      findAName(param).then(
        res=>{
          this.aOptions = (res.data || []).map((item) => {
            return {
              value: item,
              label: item,
            };
          });
        }
      )},
    initBName(name){
      let param={}
      if(!name){
        param={aName:''}
      }else{
        param={aName:name}
      }
//调用接口，注意接口传的是A的值，返回的是B的内容
      findBName(param).then(
        res=>{
          this.bNameOptions = (res.data || []).map((item) => {
            return {
              value: item,
              label: item,
            };
          });
        }
      )},
   changeANameList(e){
//当下拉框A中的值改变，B中的内容要更新
        this.initbNmame(this.queryParam.aName)
    },
    changeBNameList(e){
//当下拉框B中的值改变，A中的内容要更新
        this.initAName(this.queryParam.bName)
    },