Puxe a caixa de seleção para baixo, depois de selecionar um valor, o valor ficará esmaecido

Cenário: Há uma caixa de seleção el-select no formulário elementui. Depois que um determinado valor for necessário para ser selecionado, ele ficará esmaecido e a nova seleção é proibida.

O problema encontrado: o valor selecionado não pode ficar acinzentado no tempo, somente quando o terceiro for selecionado, o primeiro valor selecionado ficará acinzentado

Solução: Defina uma propriedade oculta que muda em tempo real, ou defina uma chave para a tabela, mas aqui utilizo o método anterior

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

exibição de estilo

exibição de código

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

Adicionado um num oculto na coluna de ação

 Meu formulário envolve adicionar membros da equipe primeiro e depois fazer seleções, então quando adicionei membros da equipe, apertei um num, porque meu projeto aqui precisa chamar uma página anterior, que é layui, então está escrito em js nativo

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

Acho que você gosta

Origin blog.csdn.net/yingw1/article/details/129729550
Recomendado
Clasificación