(vue)自动表格下拉选框已被选中的值禁止再选

(vue)自动表格下拉选框已被选中的值禁止再选

---

实现思路：
1.表格数据变化之后遍历整个表格，将被选中值放在一个数组中
2.若选中数组存在于名称列表，则将列表中对应项设为禁选

---

template:

<!-- 绑定关系 -->
<Form v-else>
	<ContentCard title="配置yygx" class="content-item">
		<Table
			:columns="relColumns2" //表格表头
			:data="reltableData2"  //表格数据
			:disabled-hover="true"
		>
			<!-- 名称 -->
			<template slot-scope="{ index }" slot="relEnName">
				<Select
					v-model="reltableData2[index].relEnName"
					filterable  //过滤功能
					placeholder="请选择"
				>
					<Option
						v-for="(item, index) in relListCh"
						:key="index"
						:label="item.label"
						:value="item.value"
						:disabled="item.disabled"
					>
					</Option>
				</Select>
			</template>
			<!-- 所属gn -->
			<template slot-scope="{ index }" slot="srcVertex">
				<span
					class="relconceptNames"
					:title="reltableData2[index].srcVertex"
					>{{ reltableData2[index].srcVertex }}</span
				>
			</template>
			<!-- 目标gn -->
			<template slot-scope="{ index }" slot="dstConcept">
				<Select
					v-model="reltableData2[index].dstConcept"
					placeholder="请选择"
					multiple //多选
					filterable //过滤功能
					allow-create
					default-first-option
				>
					<Option
						v-for="(item, index) in testListAll"
						:key="index"
						:label="item.name"
						:value="item.name"
					>
					</Option>
				</Select>
			</template>
			<!-- 操作 -->
			<template slot-scope="{ row, index }" slot="relAction">
				<Icon
					type="ios-add-circle-outline"
					style="padding-right: 10px"
					@click="relhandleAddparam2"
				/>
				<Icon
					type="ios-trash-outline"
					@click="relhandleParam2(row, index)"
				/>
			</template>
		</Table>
	</ContentCard>
	<FormItem class="bottomBtn">
		<el-button type="primary" @click="relAddAttribute"
			>保存</el-button
		>
		<el-button @click="noAdd"> 取消</el-button>
	</FormItem>
</Form>

---

script:

import { mapState, mapActions } from "vuex";
export default { 
	data() {
		return {
			//绑定关系
			relListCh: [], //名称下拉列表
			relColumns2: [
				{
					title: "名称",
					slot: "relEnName",
					align: "center",
				},
				{
					title: "所属gn",
					slot: "srcVertex",
					align: "center",
				},
				{
					title: "目标gn",
					slot: "dstConcept",
					align: "center",
				},
				{
					title: "操作",
					slot: "relAction",
					align: "center",
				},
			],
			//表格数据
			reltableData2: [
				{
					relEnName: "",
					srcVertex: "",
					dstConcept: "",
				},
			],
		}
	},
	//监听
	watch: { 
		//监听reltableData2表格数据
		reltableData2: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				this.reltableData2 = newVal;
				 <--核心代码1--> 				
				let relNameList = []; //名称已被选中记录
				this.reltableData2.forEach((item) => {
					relNameList.push(item.relEnName);//["电影..","演员.."]
				});
				for (let ele of this.relListCh) {//循环下拉列表
					let disabled = false;  //声明一个变量
					relNameList.forEach((item) => { //遍历已被选中的项
						if (ele.value == item) { //如果下拉列表的项和被选中的项相等
							disabled = true;  //变量值为true
						}
					});
					if (disabled) { //如果变量值为true
						ele.disabled = true;  //下拉选项的禁选disabled字段置为true 
					} else {
						ele.disabled = false; //否则为false
					}
					console.log(ele.disabled + ele.value);
				}
			},
		},
	},
	computed: {
		...mapState("constructStore", [ "vertex"]), //引入constructStore仓库里的vertex
	},
	mounted() { 
		this.reltableData2.forEach((item) => {
			item.srcVertex = this.vertex; //改变表格初始数据的srcVertex值
		});
	},
	//方法
	methods:{
		//名称下拉列表
		getAtt() {
			getAllPro().then((res) => { 
				res.data.data.forEach((item) => {
					 <-- 核心代码2 --> 
					if (item.lable == "2") {//只选lable=2的数据
						let objRel = {}; //配置下拉项格式
						objRel.label = item.chinese;//展示
						objRel.value = item.en;//实际值
						objRel.disabled = false;//是否禁选
						this.relListCh.push(objRel);//配置好的每个对象push进名称下拉数组
					}
				});
			});
		},
		//绑定添加表格行
		relhandleAddparam2() {
			this.reltableData2.push({
				relEnName: "",
				srcVertex: this.vertex,
				dstConcept: "",
			});
		},
		//绑定删除表格行
		relhandleParam2(row, index) {
			if (this.reltableData2.length > 1) {
				this.reltableData2.splice(row._index, 1);
			} else if (this.reltableData2.length == 1) {
				this.$Modal.error({
					title: "消息警告",
					content: "此类不允许删除",
				});
			}
		},
		//绑定保存
		relAddAttribute() {
			let arr = [];//最终提交的数组
			this.reltableData2.forEach((item) => {
				//判断每行每个字段是否有值
				if (
					item.relEnName == undefined ||
					item.dstConcept == undefined ||
					item.dstConcept.length == 0
				) {
					return this.$Modal.warning({
						title: "系统提示",
						content: "请完善配置信息",
					});
				} else {
					arr.push(item);
				}
			});
			//如果提交数据条数不等于0 且和表格长度相等（说明全部校验成功）
			if (arr.length != 0 && arr.length == this.reltableData2.length) {
				this.loading = true;
				addRelationConcept({
					conceptData: arr, 
					...
				}).then((res) => { 
				...
				});
			}
		},
		//取消
		noAdd() {
			this.$router.go(-1);
		},

	}


}

原relListCh数组

[
    {
        "value": "1111"
    },
    {
        "value": "电..."
    },
    {
        "value": "电..."
    }
]

更新后的relListCh数组（被选中的项添加了 “disabled”: true）

[
    {
        "value": "1111",
        "disabled": true
    },
    {
        "value": "电..."
    },
    {
        "value": "电..."
    }
]

处理逻辑

//自己界定需要更新数组的方法
relhandleAddparam2() {  
	this.reltableData2.forEach((item) => {
		for (let ele of this.relListCh) {
			if (ele.value == item.chinese) {
				this.$set(ele, "disabled", true);//向对象中添加字段
			}
		}
	}); 
},