element-ui 中的el-select 筛选功能应用

业务场景：

1和2 两者必填其一，3 和4 两者必填其一。1 和3 选中的内容不可以一致，2 和4 选中的内容不可以一致，同时，如果选中1，则查询出2可以选的下拉列表；若没有选中1，则查询全部数据。(3、4同理)。

注： 1、2、3、4 皆为下拉框。

由于 1 和  3 下拉数据一致，两个间不可都选该选项。通过@change 事件监听选择数据， v-model 绑定数据信息，同时在@change 事件中传递一个标志来区分两个监听的数据。

（一）el-select 中change 事件传参： 

change 事件中，会获取到当前选中的值（因为默认会将event参数传递过去）

如果你想要传递多个值，change （$event，“传递的其他值”），将“选中的当前元素“ 和 ”传递的其他值”一起传递过去。例如：

 @change="getSource($event, 'from')"

如果选中1，则查询出2可以选的下拉列表；若没有选中1，则查询全部数据。(3、4同理)。

（二）el-select 中 visible-change 事件动态给下拉框设值：（下拉框出现/隐藏时触发）

通过点击下拉框时，调用 visible-change 事件设置下拉选项。

<el-form :model="form" size="medium" :rules="rules" ref="form">
  <el-form-item label="源单位类型:" :label-width="formLabelWidth">
    <el-select v-model="form.sourcetype" size="small" style="width: calc(100% - 100px);" placeholder="请选择" @change="getSource($event, 'from')">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        :disabled="item.choose">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="源单位:" :label-width="formLabelWidth" >
    <el-select v-model="form.source" size="small" style="width: calc(100% - 100px);" placeholder="请选择" @visible-change="getUint($event, form.sourcetype)">
      <el-option
        v-for="item in options1"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        :disabled="item.choose">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="目标单位类型:" :label-width="formLabelWidth">
    <el-select v-model="form.objective" size="small" style="width: calc(100% - 100px);" placeholder="请选择" @change="getSource($event, 'to')">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        :disabled="item.choose">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="目标单位:" :label-width="formLabelWidth">
    <el-select v-model="form.targetunit" size="small" style="width: calc(100% - 100px);" placeholder="请选择" @visible-change="getUint($event, form.objective)">
      <el-option
        v-for="item in options1"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        :disabled="item.choose">
      </el-option>
    </el-select>
  </el-form-item>
</el-form>