下拉选框，选中某个值后，这个值置灰

情景：elementui表格有一个el-select选择框，要求某个值别选中后，将被置灰，禁止再次选择，

遇到的问题：不能及时将选中的值置灰，只有选择第三个时，第一个选中的才会置灰

解决方法：设置一个隐藏的实时变化的属性，或者给表格设置一个key,但是在这里我用的前一个方法

userDataKey: new Date().getTime()

 <el-table :data="userData" border max-height="300" :row-style="{height: '45px'}" :cell-style="{padding:'10px'}" :key="userDataKey">

样式展示

代码展示

html文档

  <el-table-column label="坐席号" min-width="15%" align="center" prop="seatNumber">
	<template slot-scope="scope">
		<el-select v-model="scope.row.seatNumber" placeholder="请选择"
			@change="getSeatNumber(scope.row.seatNumber,scope.row)" >
			<el-option v-for="item in SeatNumberList" :key="item.index" :value="item.seatNumber"
				:disabled="item.disabled">
			</el-option>
		</el-select>
		<el-input v-model="scope.row.seatNumber" autocomplete="off" placeholder="" v-else disabled></el-input>
	</template>
</el-table-column>

在操作列添加了一个隐藏的num

 我这个表格涉及到先添加组员，再进行选择，所以我在添加组员的时候，push了一个num,因为我这边的项目需要调用以前的一个页面，是layui的，所是原生js写的

 js部分

getSeatNumber(value,row) {
            this.SeatNumberList.map(item => {
                item.disabled = this.gridData.filter(x => x.seatNumber === item.seatNumber).length > 0
            })
            this.gridData.map(item => {
                item.num = Date.now()
            })
            this.SeatNumberList.forEach(v=>{
                if(v.seatNumber==value){
                    row.callNumber=v.callNumber
                    row.seatState=v.seatState
                    row.seatGroupId=v.seatGroupId
                }
            })//这一块是只有选择了下拉内容，后面的两列内容自动生成
        },