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