halo小伙伴們，在開(kāi)發(fā)的過(guò)程中是否有遇到需要為下拉多選框添加操作按鈕的，如全選、反選、聯(lián)級(jí)、搜索的下拉選框呢？如圖所示：
這里我們需要借助vue-treeselect插件（官方地址）
第一步，安裝vue-treeselect插件
npm install --save @riophae/vue-treeselect
第二步，封裝下拉框組件
<template>
<div class="store-tree-select store-tree-wrap">
// 以下的屬性可以自己查閱vue-treeselect官方文檔進(jìn)行查看
<xy-tree-select
:placeholder="placeholder"
value-consists-of="ALL_WITH_INDETERMINATE"
noChildrenText="暫無(wú)數(shù)據(jù)"
searchPromptText="請(qǐng)輸入搜索關(guān)鍵字"
noResultsText="無(wú)搜索結(jié)果"
:normalizer="normalizer"
:disable-branch-nodes="false"
:auto-load-root-options="loading"
:multiple="multiple"
:limit="limit"
:limitText="limitTextFun"
:maxHeight="500"
:disabled="disabled"
:options="data"
:value="currentValue"
v-model="currentValue"
:default-expand-level="defaultExpandLevel"
:flat="flat"
:auto-deselect-descendants="cascade"
:auto-select-descendants="cascade"
@open="treeSelectOpen"
@close="treeSelectClose"
@input="input">
// 這里是頂部的控制按鈕
<div slot="before-list" v-if="multiple == true" style="padding:0 0 4px 6px;">
<div class="before-list-item" @click="selAll">
<i class="el-icon-finished"></i> 全選
</div>
<div class="before-list-item" @click="selBack">
<i class="el-icon-refresh-left"></i> 反選
</div>
<div class="before-list-item" @click="doSelLink">
<i class="el-icon-link"></i> <span ref="linkText">聯(lián)級(jí)</span>
</div>
</div>
</xy-tree-select>
</div>
</template>
<script>
// 這里引入安裝好的vue-treeselect插件
import TreeSelect from '@riophae/vue-treeselect'
// 這里記得要連樣式一起引入哦
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: {
xyTreeSelect: TreeSelect,
},
mounted() {
// 獲取下拉框數(shù)據(jù)
this.loadData();
},
props: {
placeholder: {
default: '請(qǐng)選擇組織'
},
limit:{
default:1
},
//是否多選
multiple: {
default: false
},
//是否禁用
disabled: {
default: false
},
//樹(shù)類型：BLOC,BRAND,AREA
type: {
type: String,
default: undefined,
},
//是否賴加載，默認(rèn)true
lazy: {
type: Boolean,
default: true,
},
//是否自動(dòng)加載
autoLoadData: {
default: true
},
//初始值
value: {
default: null
},
// 加載時(shí)應(yīng)自動(dòng)擴(kuò)展多少級(jí)分支節(jié)點(diǎn)。設(shè)置 Infinity 為默認(rèn)使所有分支節(jié)點(diǎn)擴(kuò)展
defaultExpandLevel: {
default: 2
},
flat:{
default:true
},
//設(shè)置一開(kāi)始的列表值 用于默認(rèn)選中時(shí)候會(huì)提示‘無(wú)該門(mén)店權(quán)限’
list:{
default:Array,
},
},
watch: {
value(val) {
this.currentValue = val;
},
list(val){
if(val.length>=0){
this.data = val
}
},
// 監(jiān)聽(tīng)點(diǎn)擊的聯(lián)級(jí)反聯(lián)級(jí)切換文本內(nèi)容，在computed中操作也是可以的
openStatu(val){
if(val){
if(this.cascade){
this.$nextTick(()=>{
this.$refs.linkText.innerHTML = '聯(lián)級(jí)'
})
}else {
this.$nextTick(()=>{
this.$refs.linkText.innerHTML = '反聯(lián)級(jí)'
})
}
}
}
},
data() {
return {
loading: true,
normalizer(node) {
return {
id: node.id,
// 由于小編這里有顯示判斷，所以根據(jù)字段進(jìn)行了部分文本渲染判斷
label: node.title==undefined?'無(wú)該門(mén)店權(quán)限' : node.title + (node.type == 1 ? '（品牌）' : node.type == 2 ? '（區(qū)域）' : '（門(mén)店)'),
children: node.subs != null ? node.subs : undefined,
isDisabled: node.disabled,
}
},
itemDisabled_:false,
data: [],
currentValue: this.value,
cascade: true, // false表示不級(jí)聯(lián) true表示級(jí)聯(lián)
allDataIds:[],
selLink:true,
openStatu:false,
}
},
methods: {
// 聯(lián)級(jí)按鈕操作
doSelLink(){
this.$nextTick(() => {
this.selLink = !this.selLink
this.cascade = this.selLink
})
if(!this.cascade){
this.$nextTick(()=>{
this.$refs.linkText.innerHTML = '聯(lián)級(jí)'
})
}else {
this.$nextTick(()=>{
this.$refs.linkText.innerHTML = '反聯(lián)級(jí)'
})
}
},
// 反選
selBack(){
// console.log("已經(jīng)選了的",this.currentValue)
let hasSel = this.currentValue; //已經(jīng)選中的列表
if(hasSel.length<=0){
return;
}
let allList = this.allDataIds; //全部的列表
let readyList = []; //準(zhǔn)備放新的
readyList = hasSel.filter(x => allList.indexOf(x) == -1)
.concat(allList.filter(x => hasSel.indexOf(x) == -1));
this.currentValue = readyList
},
//全選
selAll(){
this.currentValue = this.allDataIds
},
funChildren(arr) {
let childs = arr
for (let i = childs.length; i--; i > 0) {
if (childs[i].subs) {
this.allDataIds.push(childs[i].id)
this.funChildren(childs[i].subs)
} else {
this.allDataIds.push(childs[i].id)
}
}
return this.allDataIds
},
clearInput() {
this.currentValue = null;
},
input(value) {
this.$emit('selectChange', value);
},
/**
*當(dāng)所選元素超過(guò)定義的限制時(shí)處理顯示的消息的功能。
*/
limitTextFun(count) {
return '+' + count
},
loadData(){
this.allDataIds = []
this.data = this.$store.state.UserAreasTree.UserAreasTreeData;
this.funChildren(this.data)
},
/**
*菜單打開(kāi)時(shí)，獲取樹(shù)結(jié)構(gòu)的值, 這樣可以每次都獲取一下最新的
*/
treeSelectOpen() {//UserAreasTree.js
/*let data = this.$store.state.UserAreasTree.UserAreasTreeData;
this.data = this.publicFun.deleteChildren(data, 'subs');*/
this.allDataIds = []
this.data = this.$store.state.UserAreasTree.UserAreasTreeData;
this.funChildren(this.data)
this.openStatu = true
},
treeSelectClose(){
this.openStatu = false
}
},
}
</script>
<style>
.before-list-item{
float:left;
width: 33.33%;
text-align: center;
cursor: pointer
}
.before-list-item:hover{
color: #2d8cf0;
}
.vue-treeselect__control .vue-treeselect__limit-tip {
padding-top: 2px;
}
.vue-treeselect__control {
height: 32px;
}
.vue-treeselect--has-value .vue-treeselect__multi-value {
margin-bottom: 0;
}
.vue-treeselect__multi-value-item-container {
padding-top: 2px;
}
.store-tree-wrap{
line-height: 20px;
}
</style>
第三步，在需要該組件的頁(yè)面引入該組件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-607819.html
// 使用組件
<xy-form-tree-select :value="filterForm.areaIds" :multiple="true" @selectChange="selectArea"/>
// 引入組件
import xyFormTreeSelect from "../../common/XyTreeSelectControl";
// 回調(diào)方法
selectArea(val) {
this.filterForm.areaIds = val;
},
好啦，快去試試看可不可行吧，如果有更好的方法的小伙伴們記得跟小編分享一下你們的開(kāi)發(fā)經(jīng)驗(yàn)哦！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-607819.html
到了這里，關(guān)于【vue+element UI】實(shí)現(xiàn)帶全選、反選、聯(lián)級(jí)、搜索的下拉多選框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
