select 총알 레이어 하단에 작동 버튼을 넣는 것은 매우 일반적인 설계 방법입니다.
그러나 불행히도 element-ui 우리 에게이 슬롯을 제공하지 않았습니다. 이 기능을 구현하려면 구성 요소 만 다시 작성하거나 공식 업데이트를 기다릴 수 있습니까? 대답은 물론 아니요!
el-select 및 el-cascader 지원하고 효과의 미리보기를 클릭하여 기능을 통해이 기능을 구현하는 데 약간의 시간을 보냈습니다.
실제로 논리는 매우 간단합니다. 다음 html 지정된 위치에 삽입하십시오.
<ul class = el-cascader-menu__ list style = border-top : solid 1px #e4e7ed; 패딩 : 0> <li class = el-cascader-node style = 38px; line-height : 38px> <i class = el-icon-plus> </i> <el-cascader-node__label> </space </space> class = el-icon-arrow-right el-cascader-node___postfix/> </li> </ul>
나는 여기에서 el-cascader 스타일을 직접 사용합니다. 실제로 사용하면이 html 내 자신의 요구에 따라 수정할 수 있습니다.
코드 에서이 함수를 methods 에 작성하십시오
/*** 요소 -ui* @param visible* @param refname set refname* @param on click on click to listing*/visiblechange (Visible, refname, onclick) {if (Visible) {const ref = this. $ refs]; 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 = el-icon-menu> </i> <span class = el-cascader-node__label> 제품 분류 관리 </span> <i class = el-icon-arrow-right el-coscader node __pofix////<postfix` Popper.appendChild (EL); el.onclick = () => {// 하단 버튼의 클릭 이벤트를 클릭 한 후 트리거하려는 논리는 onclick && onclick (); // 다음 코드는 클릭 후 숨겨진 총알 레이어를 구현하고 if (ref.toggledRopDownVisible) {ref.toggledRopDownVisible (false); } else {ref.visible = false; }}}; }}}, el-select 의 호출 방법은 el-cascader 와 동일합니다. 여기에서 el-cascader 예로 사용됩니다.
<el-cascader : 옵션 = cascaderoptions v-model = cascadervalue @visible-change = v => visiblechange (V, 'cascader', cascaderclick) ref = cascader/>팁 : 업그레이드가 업데이트 될 때 공식 버전이 나중에 실패 할 수 있으므로주의해서 사용하십시오. 요약
위의 내용은 Editor가 요소 -UI SELECT 및 CASCADE 하단의 하단 작업 버튼을 추가하기 위해 소개 한 것입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!