Pull down the check box, after selecting a value, the value will be grayed out

Scenario: There is an el-select selection box in the elementui form. After a certain value is required to be selected, it will be grayed out, and re-selection is prohibited.

The problem encountered: the selected value cannot be grayed out in time, only when the third one is selected, the first selected value will be grayed out

Solution: Set a hidden property that changes in real time, or set a key for the table, but here I use the previous method

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

style display

code display

html document

  <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>

Added a hidden num in the action column

 My form involves adding team members first, and then making selections, so when I added team members, I pushed a num, because my project here needs to call a previous page, which is laidui, so it is written in native js

 js part

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
                }
            })//这一块是只有选择了下拉内容,后面的两列内容自动生成
        },

Guess you like

Origin blog.csdn.net/yingw1/article/details/129729550