Установка кнопки «Работа» в нижнюю часть слоя select Bullet является очень распространенным методом проектирования.
Но, к сожалению, element-ui не предоставил нам этот слот. Если мы хотим реализовать эту функцию, можем ли только переписать компоненты или ждать официальных обновлений? Ответ, конечно, нет!
Я потратил немного времени на реализацию этой функции через функцию, поддерживая el-select и el-cascader , нажмите Предварительный просмотр эффекта
На самом деле, логика очень проста. Просто вставьте следующий html в указанное место.
<ul class = el-cascader-menu__list style = border-top: сплошной 1px #e4e7ed; прокладка: 0> <li class = el-cascader-node style = высота: 38px; line-hight: 38px> <i class = el-icon-plus> </i> class = el-cascader-node node__ node__ node__ node node__ node__ node__ node node__ node node__m el-cascader-node__postfix/> </li> </ul>
Я прямо использую стиль el-cascader здесь. В реальном использовании этот html может быть изменен в соответствии с моими собственными потребностями
В коде напишите эту функцию methods
/*** Добавить кнопку «Руководство» на основе слоя пули для выбора и каскадера Element-Ui* @param visible* @param refname set refname* @param onclick кнопку нижней работы нажмите, чтобы прослушать*/visiblechange (visible, refname, onclick) {if (visible) {const ref = this. $ Refs [refname]; let popper = ref. $ refs.popper; if (popper. $ el) popper = popper. $ el; if (! array.from (popper.children) .some (v => v.classname === 'el-cascader-menu__list')) {const el = document.createElement ('ul'); el.classname = 'el-cascader-menu__list'; el.style = 'border-top: твердый 1px #e4e7ed; Заполнение: 0; Цвет: #606266; '; el.innerhtml = `<li class = el-cascader-node style = высота: 38px; линия-высота: 38px> <i class = el-icon-menu> </i> <span class = el-cascader-node__label> Управление классификацией продукта </span> <i class = el-icon-arrow-right el-cascader node__postfix/el-arrow-right el-cascader node__> </span> <i class = el-icon-arrow-right-node-node__> popper.appendchild (el); el.onclick = () => {// Логика, которую вы хотите запустить после нажатия события Click от нижней кнопки, также может быть записана непосредственно Onclick && onclick (); // Следующий код реализует пули, скрытый после нажатия, и не нужно удалять, если (ref.toggledropdownvisible) {ref.toggledropdownvisible (false); } else {ref.visible = false; }}}; }}}, Метод вызова el-select такой же, как el-cascader . Здесь el-cascader используется в качестве примера.
<el-cascader: options = cascaderoptions v-model = cascadervalue @visible-change = v => visiblechange (v, 'cascader', cascaderclick) ref = cascader/>Совет: официальная версия может потерпеть неудачу позже, так как обновление обновляется, поэтому, пожалуйста, используйте ее с осторожностью Суммировать
Выше приведено то, что редактор представил вам, чтобы добавить нижние кнопки эксплуатации в нижней части элемента-UI Select и Cascade. Я надеюсь, что это будет полезно для всех!