Colocar o botão de operação na parte inferior da camada de bala select é um método de design muito comum.
Infelizmente, porém, element-ui não nos forneceu esse slot. Se quisermos implementar essa função, só pode reescrever os componentes ou aguardar atualizações oficiais? A resposta é claro que não!
Passei um pouco de tempo implementando essa função por meio de uma função, apoiando el-select e el-cascader , clique em Visualização do efeito
De fato, a lógica é muito simples. Basta inserir o seguinte html no local especificado.
<UL Class = El-Cascader-Menu__List Style = Border-top: Solid 1px #e4e7ed; preenchimento: 0> <li class = el-cascader node style = altura: 38px; line-hight: 38px> <i classe = el-icon-plus> </i> <span Class = el-cascader-node> class = el-icon-arrow-right el-cascader-node__postfix/> </li> </ul>
Eu uso diretamente o estilo el-cascader aqui. Em uso real, este html pode ser modificado de acordo com minhas próprias necessidades
No código, escreva esta função nos methods
/*** Adicione o botão de operação inferior da camada de bala para a seleção e cascata de elemento-ui* @param visível* @param refName Set RefName* @param onclick o botão de operação inferior Clique para ouvir*/visibleChange (visível, refname, onclick) {if (visible) {const = this. Seja popper = ref. $ refs.popper; if (popper. $ el) popper = popper. $ el; if (! Array.From (Popper.Children). Alguns (v => v.className === 'El-Cascader-Menu__List')) {const el = document.CreateElement ('Ul'); el.className = 'el-cascader-menu__list'; el.style = 'Border-top: sólido 1px #e4e7ed; preenchimento: 0; Cor: #606266; '; el.innerhtml = `<li class = el-cascader-node style = altura: 38px; altura de linha: 38px> <i class = el-icon-menu> </i> <span Class = el-cascader-node__label> gestão do produto </span> <i/iix/iccader-right__label>; popper.appendChild (EL); el.onClick = () => {// A lógica que você deseja acionar depois de clicar no evento de clique no botão inferior também pode ser escrita diretamente OnClick && onclick (); // O código a seguir implementa a camada de bala escondida após clicar e não precisa ser excluída se (ref.toggledropdownVisible) {ref.toggledropdownVisible (false); } else {ref.Visible = false; }}}; }}}, O método de chamada de el-select é o mesmo que el-cascader . Aqui, el-cascader é usado como exemplo.
<el-cascader: options = cascaderoptions v model = cascadervalue @visible-change = v => visiblechange (v, 'cascader', cascaderclick) ref = cascader/>Dica: a versão oficial pode falhar mais tarde, pois a atualização é atualizada, então use -a com cautela Resumir
O exposto acima é o que o editor apresentou a você para adicionar os botões de operação inferior na parte inferior do elemento-ui select e cascata. Espero que seja útil para todos!