Poner el botón de operación en la parte inferior de la capa select Bullet es un método de diseño muy común.
Pero desafortunadamente element-ui no nos proporcionó esta ranura. Si queremos implementar esta función, ¿solo puede reescribir los componentes o esperar actualizaciones oficiales? ¡La respuesta es, por supuesto, no!
Pasé un poco de tiempo implementando esta función a través de una función, apoyando el-select y el-cascader , haga clic en la vista previa del efecto
De hecho, la lógica es muy simple. Simplemente inserte el siguiente html en la ubicación especificada.
<ul class = El-Cascader-Menu__List style = border-top: sólido 1px #e4e7ed; padding: 0> <li class = el-cascader-node-node: altura: 38px; line-height: 38px> <i class = el-icon-plus> </i> <span class = el-Cascader-node__label> New Product Classification </span </span <iPlus> class = el-icon-arrow-right el-cascader-node__postfix/> </li> </ul>
Uso directamente el estilo el-cascader aquí. En uso real, este html se puede modificar de acuerdo con mis propias necesidades
En el código, escriba esta función en methods
/*** Agregue el botón de operación inferior de la capa de bala para el select y el cascader de element-ui* @param visible* @param refname set refname* @param onclick el botón de operación inferior haga clic para escuchar*/visibleChange (visible, refname, onclick) {if (visible) {const refer = this. Sea 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: Solid 1px #E4E7ed; relleno: 0; color: #606266; '; el.innerhtml = `<li class = el-cascader-node style = altura: 38px; line-height: 38px> <i class = el-icon-Menu> </i> <span class = el-cascader-node__label> gestión de clasificación de productos </span> <i class = el-icon-prowerwer-right el-Cascader-Node__postfix/>`/`/; popper.appendchild (El); El.OnClick = () => {// La lógica que desea activar después de hacer clic en el evento de clic del botón inferior también se puede escribir directamente onClick && onClick (); // El siguiente código implementa la capa de bala oculta después de hacer clic y no necesita ser eliminado si (ref.toggledropdownvisible) {ref.toggledropdownvisible (falso); } else {ref.visible = false; }}}; }}}, El método de llamadas de el-select es el mismo que el-cascader . Aquí, el-cascader se usa como ejemplo.
<El-Cascader: options = cascadeROptions v-Model = cascAdervalue @visible-change = v => visiblechange (v, 'cascader', cascaderclick) ref = cascader/>Consejo: La versión oficial puede fallar más tarde ya que la actualización se actualiza, así que úsela con precaución Resumir
Lo anterior es lo que el editor le presentó para agregar los botones de operación inferiores en la parte inferior de la selección y cascada de Element-UI. ¡Espero que sea útil para todos!