Element-UIのSelectおよびCascadeに弾丸底底操作ボタンを追加する方法

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の下部に操作ボタンを追加します。私はそれが誰にでも役立つことを願っています！