Menempatkan tombol operasi di bagian bawah lapisan peluru select adalah metode desain yang sangat umum.
Namun sayangnya element-ui tidak memberi kami slot ini. Jika kami ingin mengimplementasikan fungsi ini, hanya dapat menulis ulang komponen atau menunggu pembaruan resmi? Jawabannya tentu saja tidak!
Saya menghabiskan sedikit waktu mengimplementasikan fungsi ini melalui suatu fungsi, mendukung el-select dan el-cascader , klik pratinjau efeknya
Faktanya, logikanya sangat sederhana. Cukup masukkan html berikut ke lokasi yang ditentukan.
<ul class = el-cascader-menu__list style = border-top: solid 1px #e4e7ed; padding: 0> <li class = el-cascader-node style = tinggi: 38px; line-height: 38px> <i class = el-icon-plus> </i> <span class = el-cascader-no-node = el-icon-plus> </i> <span class = el-cascader-no-node> noode> nEwon> </i> <span class = el-cascader-no-node> noode> nEW-PLUS> </i> <span class = elccader-no-node> class = el-icon-arrow-right el-cascader-node__postfix/> </li> </ul>
Saya langsung menggunakan gaya el-cascader di sini. Dalam penggunaan aktual, html ini dapat dimodifikasi sesuai dengan kebutuhan saya sendiri
Pada kode, tulis fungsi ini dalam methods
/*** Tambahkan tombol operasi bawah lapisan peluru untuk cascader pilih dan elemen-ui* @param visible* @param refname atur refname* @param onklick tombol operasi bawah klik untuk mendengarkan*/visiblechange (visible, refname, onClick) {if (terlihat) {const Ref = this. Refs. Biarkan 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; Padding: 0; Warna: #606266; '; el.innerHtml = `<li class = el-cascader-node style = tinggi: 38px; garis-garis: 38px> <i class = el-icon-menu> </i> <span class = el-cascader-node__label> Manajemen Klasifikasi Produk </span> <class = el-cascader-node__label> Manajemen Klasifikasi Produk </span> <Class = el-cascader-roh-roh-roh-roh-roh-rerong Popper.AppendChild (EL); el.onClick = () => {// Logika yang ingin Anda picu setelah mengklik acara klik tombol Bawah juga dapat ditulis secara langsung onClick && onClick (); // Kode berikut mengimplementasikan lapisan peluru yang disembunyikan setelah mengklik dan tidak perlu dihapus jika (ref.toggledRopDownVisible) {ref.toggledRopDownVisible (false); } else {ref.visible = false; }}}; }}}, Metode panggilan el-select sama dengan el-cascader . Di sini, el-cascader digunakan sebagai contoh.
<el-cascader: opsi = cascaderoptions v-model = cascaderValue @visible-change = v => visiblechange (v, 'cascader', cascaderclick) ref = cascader/>Kiat: Versi resmi mungkin gagal nanti saat peningkatan diperbarui, jadi silakan gunakan dengan hati -hati Meringkaskan
Di atas adalah apa yang diperkenalkan editor kepada Anda untuk menambahkan tombol operasi bawah di bagian bawah elemen-UI SELECT dan CASCADE. Saya harap ini akan membantu semua orang!