element select下拉选项剔除已添加的选项

项目中遇到个需求：
货权主体为下拉单选，点击“新增”可以添加多个货权主体，如下图：

要求每次新增一行后，下拉选项需要剔除列表中已添加过的选项，如下图：

1.初步代码实现：

思路：
循环货权主体列表，将已添加选项的 id（value） 组成一个数组，去跟下拉选项的初始数据作对比，筛选出未添加的选项生成新的下拉选项数组，赋值给 select 绑定的变量即可。这些逻辑可以写成一个公用方法。

然后在每次操作列表时（如下拉框change、点击新增、删除）都调用这个方法。比如@change 调用一下 existOps 方法，调用的具体代码下面就省略啦。。。

<el-select 
	filterable
	clearable
	v-model="scope.row.ownerCompanyId"
    placeholder="请选择货权主体">
    <el-option
      v-for="item in ownerCompanyOpts"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      @change="ownerCompanyChange($event, scope.row)">
     </el-option>
</el-select>

export default {
  data() {
  	ownerCompanyOpts: [], // 货权主体下拉列表渲染数据
    ownerCompanyInitData: [], // 货权主体下拉列表初始数据
    existIds: [], // 货权主体下拉已添加选项的id
    form: {
	    "items": [
	      {
	        "ownerCompanyId": "",
	        "ownerContact": "",
	        "ownerEmail": "",
	      }
	    ]
    }
  },
  created() {
    this.getCompanyOpts()
  },
  methods: {
  	// 获取货权主体下拉列表数据
    getCompanyId(){
      api.getZhutiList({}).then(res => {
        this.ownerCompanyOpts = res.list.map(item => {
          return {
            label: item.companyName,
            value: item.id
          }
        })
        this.ownerCompanyInitData = this.ownerCompanyOpts
      })
    },
  	// 下拉是否已添加
	existOps() {
		// 清空重置
		this.existIds = []
		// 货权主体下拉已选的id
		this.form.items.forEach(item => {
			if(!this.existIds.includes(item.ownerCompanyId)) {
				this.existIds.push(item.ownerCompanyId)
			}
		})
		// 货权主体下拉可选的数组
		let companyArr = []
		this.ownerCompanyInitData.forEach(item => {
			if(this.existIds.includes(item.value)) {
				companyArr.push(item)
			}
		})
		this.ownerCompanyOpts = companyArr
	}
  }
}

缺陷

写完上面的代码，确实可以剔除已有的选项了。但是测试立马就给我提了 bug，那是什么问题呢？？

每次操作完，当前选项就变成了 value 值，本来是应该展示 label 的呀，怎么肥事？？？
测试一番发现，当前选项的下拉选项列表里是剔除了当前这一项的，于是，它就找不到对应的 label 值了，所以只会显示 value。

那么，我又想到了一个方法：那就让每个选项的下拉选项列表都为完整的初始数据，用个 show 字段控制它们的显示、隐藏就好啦。

2.修复上一步的 bug

模板里新增 v-show=“item.show”

<el-select 
	filterable
	clearable
	v-model="scope.row.ownerCompanyId"
    placeholder="请选择货权主体">
    <el-option
      v-for="item in ownerCompanyOpts"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      v-show="item.show"
      @change="ownerCompanyChange($event, scope.row)">
     </el-option>
</el-select>

注释“新增”的部分就是做了改动的代码：

methods: {
  	// 获取货权主体下拉列表数据
    getCompanyId(){
      api.getZhutiList({}).then(res => {
        this.ownerCompanyOpts = res.list.map(item => {
          return {
            label: item.companyName,
            value: item.id,
            show: true // 新增
          }
        })
        this.ownerCompanyInitData = this.ownerCompanyOpts
      })
    },
  	// 下拉是否已添加
	existOps() {
		// 清空重置
		this.existIds = []
		// 新增
		this.ownerCompanyInitData.forEach(item => {
	        item.show = true
	     })
		// 货权主体下拉已选的id
		this.form.items.forEach(item => {
			if(!this.existIds.includes(item.ownerCompanyId)) {
				this.existIds.push(item.ownerCompanyId)
			}
		})
		// 货权主体下拉可选的数组
		let companyArr = []
		this.ownerCompanyInitData.forEach(item => {
			if(this.existIds.includes(item.value)) {
				// 新增
				item.show = false
			}
			// 新增
			companyArr.push(item)
		})
		this.ownerCompanyOpts = companyArr
	}
  }

缺陷

功能实现了呀！每个选项的下拉都剔除了已添加的选项了呀！！那还有啥缺陷？？

测试大哥就说了，虽然是剔除了已添加的选项，但是把当前选项自个儿也剔除了，看着怪怪的。它自己个儿应该也在下拉列表里面的。。。那就再优化一下吧！

3.优化

思路：
那就不能在监听 change 事件时调用 existOps 方法了，因为 change 事件得改变选项了才会触发。所以得用 click 事件，每次点击 select 时就触发。

之前的代码只需要加一步，点击 select 时，在调用 existOps 将已有选项剔除后，再将当前选项加回到下拉选项中，即将对应的 show 置为 true。

模板中新增 @click.native=“ownerCompanyClick(scope.row)” ：

<el-select 
	filterable
	clearable
	v-model="scope.row.ownerCompanyId"
    placeholder="请选择货权主体"
    @click.native="ownerCompanyClick(scope.row)">
    <el-option
      v-for="item in ownerCompanyOpts"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      v-show="item.show">
     </el-option>
</el-select>

methods 中增加 ownerCompanyClick 方法即可：

ownerCompanyClick(row) {
  this.existOps() // 先调用之前的方法
  // 将当前选项加入到选项列表
  this.ownerCompanyOpts.forEach(item => {
    if(item.value == row.ownerCompanyId) {
      item.show = true
    }
  })
},

可以看到，当前选项的选项下拉列表中就包含自己了！！完美！！