表单有多个下拉框使用同一数据源，实现下拉数据不被重复选择

问题

页面中会有多个下拉框，下拉框的值多个下拉框共享，但需要最终多个下拉框选中的数据不重复

演示代码

<el-row >
	<el-form-item label="加密字段" :required="true" label-width="120px" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	    <el-button  @click.prevent="addRow1()"><P>加一行</P></el-button>
		<el-button  @click.prevent="delData1()"><P>删除</P></el-button>
	</el-form-item>
</el-row>

<el-row>
	<el-col >
		<div class="table">
			<el-table :data="data.desensitizeList" 
                :key="itemKey"  
                tooltip-effect="dark" 
                border stripe 
                style="width: 100%"	
                @selection-change='selectRow1'
            >
				<el-table-column type="selection" width="45" align="center"/>
				<el-table-column 
                    label="序号" prop="rowNum" type="index"  
                    width="60" align="center"
                />
				<el-table-column  label="字段" align="center">
					<template v-slot="scope">
					<el-select 
                        v-model="scope.row.fieldId" filterable placeholder="请选择" 
                    >
						<el-option 
                            v-for="item in getOptionList(scope.row.fieldId)" 
                            :key="item.id" :label="item.cname" :value="item.id"
                        ></el-option>
					</el-select>								
					</template>
				</el-table-column>
				<el-table-column label="是否加密" width="150"  align="center" >
					<template v-slot="scope">
						<el-select prop="condition"  v-model="scope.row.desensitize" placeholder="请选择" clearable class="w100">
							<el-option label="是" value="1"></el-option>
							<el-option label="否" value="0"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="禁止参与筛选" width="150" align="center">
					<template v-slot="scope">
						<el-select prop="condition"  v-model="scope.row.forbidGroup" placeholder="请选择" clearable class="w100">
							<el-option label="是" value="1"></el-option>
							<el-option label="否" value="0"></el-option>
						</el-select>	
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-col>
</el-row>

核心js代码：

    const getOptionList = (value: string) => {
			const optionsTmp = state.options.map(e => {
				if(typeof e==='object'){
					return Object.assign({},e);
				}else{
					return e;
				}
			});
			state.data.desensitizeList.forEach((val, index) => {
				if(!(val && val.fieldId === value)) {
					optionsTmp.forEach((v, i) => {
						if(val.fieldId === v.id){
							// i 为选中的索引
							optionsTmp.splice(i, 1)
						}
					})
				}
			})
			return optionsjTmp;
		}

代码解读

字段解释：

state.options 是下拉框数据，

state.data.desensitizeList  已经添加的下拉框选的值集合，

方法参数value是当前下拉框选的值，若未选，传过来的就是null

代码含义

这段代码的最终目的，就是获取每一个下拉框可以选择的数据集，具体逻辑如下：

1. 将原始的下拉框数据深拷贝到临时变量optionsTmp（原始的下拉框数据不能更改，否则其他下拉框调用此方法获取下拉框的值就有问题了）；
2. 遍历已选的下拉框的值集合；
3. 每一次循环，会判断当前下拉框是否已经选过具体值了，并且若选过具体值就与当前循环的id比较，相等就不处理（因为已经选过具体值后，再重新改变下拉框的值时，不能剔除掉当前下拉框已经选的值）；否则，再往下处理；
4. 在判断当前循环体的值是否在optionsTmp存在，若存在，optionsTmp 就剔除；
5. 最后返回的optionsTmp 就是最终下拉框可选的值。