Das Einlegen der Operationstaste am unteren Rand der select der Kugelschicht ist eine sehr häufige Entwurfsmethode.
Leider hat element-ui uns diesen Slot nicht zur Verfügung gestellt. Wenn wir diese Funktion implementieren möchten, können Sie die Komponenten nur umschreiben oder auf offizielle Updates warten? Die Antwort ist natürlich nein!
Ich habe ein wenig Zeit damit verbracht, diese Funktion durch eine Funktion zu implementieren, um el-select und el-cascader zu unterstützen. Klicken Sie auf die Vorschau auf den Effekt
Tatsächlich ist die Logik sehr einfach. Fügen Sie einfach die folgenden html in den angegebenen Ort ein.
<ul class=el-cascader-menu__list style=border-top: solid 1px #E4E7ED;padding:0> <li class=el-cascader-node style=height:38px;line-height: 38px> <i class=el-icon-plus></i> <span class=el-cascader-node__label>New product classification</span> <i class=el-icon-arrow-right el-cascader-node__Postfix/> </li> </ul>
Ich benutze hier den el-cascader -Stil direkt. In der tatsächlichen Verwendung kann diese html gemäß meinen eigenen Bedürfnissen geändert werden
Schreiben Sie diese Funktion im Code in methods
/*** Fügen Sie die untere Operationschaltfläche der Kugelschicht für die Auswahl und den Kaskader von Element-UI hinzu* @param sichtbar* @param refname set refname* @param onclick Die untere Operation Taste Klicken Sie an. lass popper = ref. $ refs.popper; if (popper. $ el) popper = popper. $ el; if (! array.from (popper.children). el.classname = 'el-cascader-menu__List'; El.Style = 'Border-Top: Solid 1px #e4e7ed; Polsterung: 0; Farbe: #606266; '; El.InnerHtml = `<li class = el-cascader-Knotenstil = Höhe: 38px; Zeilenhöhe: 38px> <i class = el-icon-menu> </i> <span class = el-cascader-node__label> Produktklassifizierungsmanagement </span> <i class = el-cascader-node__label tecader-teer-node__Postfix/light/light/light/light/light/light/light/light # popper.appendchild (el); el.onclick = () => {// Die Logik, die Sie nach dem Klicken auf den Klickereignis auf der unteren Schaltfläche auslösen möchten, kann auch direkt aufclick && onclick () geschrieben werden; // Der folgende Code implementiert die nach dem Klicken versteckte Kugelschicht und muss nicht gelöscht werden, wenn (Ref.ToggledropDownvisible) {Ref.ToggledropDownvisible (False); } else {ref.visible = false; }}}; }}}, Die Anrufmethode von el-select ist die gleiche wie el-cascader . Hier wird el-cascader als Beispiel verwendet.
<el-cascader: options = cascaderoptions v-model = cascaderervalue @sichtbar-change = v => visiblechange (V, 'Cascader', CascaderClick) Ref = Cascader/>Tipp: Die offizielle Version kann später im Aktualisierung des Upgrades fehlschlagen. Verwenden Sie sie also bitte mit Vorsicht Zusammenfassen
Das obige ist das, was der Editor Ihnen vorgestellt hat, um die unteren Operationsschaltflächen am unteren Rand des Element-UI Select and Cascade hinzuzufügen. Ich hoffe, es wird für alle hilfreich sein!