您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue中Element分組+多選+可搜索Select選擇器怎么實(shí)現(xiàn)”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中Element分組+多選+可搜索Select選擇器怎么實(shí)現(xiàn)”這篇文章吧。
準(zhǔn)備工作:
除了vue腳手架、element等必要包之外。該項(xiàng)目還用到了linq.js(https://github.com/mihaifm/linq),該工具可以快速?gòu)臄?shù)組中查找所需內(nèi)容。
npm install --save linq
編輯build/webpack.base.conf.js
module:{ ...... //添加 new webpack.ProvidePlugin({ Enumerable: "linq" }) }
數(shù)據(jù)源格式:
var selectList = [ { name:"",//一級(jí)名稱 CName:"", //二級(jí)名稱 value:"" //值 }, {name:"",CName:"",value:""}, ...... ]
實(shí)現(xiàn):
script
data (){ return{ selectModel: [], multipleSelectOption:[], } }, methods:{ //將源數(shù)據(jù)轉(zhuǎn)成element所需格式 transMultipleSelectOption(){ var level1List = Enumerable.from(this.allSelectList).distinct("o=>o.name").toArray(); var newArr = level1List.map(item=>{ let children = Enumerable.from(this.allSelectList).where((o)=>{return o.name==item.name;}).toArray(); var options = children.map(itemc=>{ return {"name": itemc.CName, "value":itemc.value}; }); return {"name": item.name, "options":options} }); this.multipleSelectOption = newArr; }, //重置options(select自動(dòng)補(bǔ)全相關(guān)) remoteMethod(queryString, lists) { //lists:原始數(shù)據(jù) var mappedList = Enumerable.from(lists).where((o)=>{return o.CName.indexOf(queryString)!=-1 || o.name.indexOf(queryString)!=-1;}).toArray(); //找出匹配搜索關(guān)鍵字的數(shù)據(jù)集 var level1List = Enumerable.from(mappedList).distinct("o=>o.name").toArray(); //從所匹配的數(shù)據(jù)集中找出所有一級(jí)菜單集合(含去重) //重新拼成element所需的數(shù)據(jù)格式 var newArr = level1List.map(item=>{ let children = Enumerable.from(mappedList).where((o)=>{return o.name==item.name;}).toArray(); var options = children.map(itemc=>{ return {"name": itemc.CName, "value":itemc.value}; }); return {"name": item.name, "options":options} }); this.multipleSelectOption = newArr; }, //點(diǎn)擊一級(jí)菜單全選/全不選實(shí)現(xiàn) checkAll(value){ //value: 點(diǎn)擊的一級(jí)name var list = Enumerable.from(this.multipleSelectOption).where((o)=>{return o.name==value;}).toArray(); var level2ValueList = Enumerable.from(list[0].options).select("o=>o.value").toArray(); //所有該一級(jí)下二級(jí)的value集合 var num=0; level2ValueList.forEach((value)=>{ this.selectModel2.forEach((model, index)=>{ if(model==value){ this.selectModel2.splice(index, 1); //如有匹配,先刪除 num++; return true; } }) }) if(num < level2ValueList.length){ //需要全選 this.selectModel2 = this.selectModel2.concat(level2ValueList); //合并數(shù)組 } } }, mounted: function(){ this.transMultipleSelectOption(); },
template
<el-select v-model="selectModel" multiple filterable remote reserve-keyword placeholder="請(qǐng)輸入關(guān)鍵詞" :remote-method="(queryString)=>{ remoteMethod(queryString, allSelectList); }"> <el-option-group v-for="group in multipleSelectOption" :key="group.name" :label="group.name" @click.native="checkAll(group.name)"> <el-option v-for="item in group.options" :key="item.value" :label="item.name" :value="item.value"> </el-option> </el-option-group> </el-select>
以上是“Vue中Element分組+多選+可搜索Select選擇器怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。