select弾丸層の下部に操作ボタンを置くことは、非常に一般的な設計方法です。
しかし、残念ながら、 element-uiこのスロットを提供しませんでした。この関数を実装したい場合、コンポーネントの書き換えのみまたは公式の更新を待つことができますか?答えはもちろんノーです!
私はこの関数を機能させ、関数を通じて実装し、 el-selectとel-cascaderをサポートし、効果のプレビューをクリックしました
実際、ロジックは非常に単純です。次のhtmlを指定された場所に挿入するだけです。
<ul class = el-cascader-menu__list style = border-top:solid 1px#e4e7ed; padding:0> <li class = el-cascader-node style = height:height:38px; line-height:38px> class = el-icon-arrow-right elcascader node__postfix/> </li> </ul>
ここでは、 el-cascaderスタイルを直接使用しています。実際に使用すると、このhtml私自身のニーズに応じて変更できます
コードで、この関数をmethodsに記述します
/*** element-uiのselect and cascaderの弾丸レイヤーの下部操作ボタンを追加* @param refname set refname* @param onclick onclick onclick onclick onclick onclick onclick onclick onclick onclick click*/visiblechange(visible、refname、onclick){if(visible){const ref = ref = refs [refs]; 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:solid 1px#e4e7ed;パディング:0;色:#606266; '; el.innerhtml = `<li class = el-cascader-node style = height:38px; line-height:38px> <i class = icon-menu> </i> <span class = elcascader-node_leabel>製品分類管理</span> <i class = el-cascadre-noder popper.AppendChild(EL); el.onclick =()=> {//下部ボタンのクリックイベントをクリックした後にトリガーするロジックは、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/>ヒント:アップグレードが更新されると公式バージョンが後で失敗する可能性があるため、注意して使用してください要約します
上記は、編集者が紹介したもので、Element-UI SelectとCascadeの下部に操作ボタンを追加します。私はそれが誰にでも役立つことを願っています!