自定义iview选择器（原创）-全选按钮Csearch

该组件依赖于iview的select，可以在全局安装了iview的项目或本地引入Select的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右依次为：未选中状态、选中一个状态、全部选中状态功能描述下拉框分为三部分：选中列表；全部选中/全部取消按钮；未选择的列表；whenanitemintheunselectedlistisselected,theitemwillautomaticallypopfromtheunselectedlisttotheselectedlist;whenanitemintheselectedlistisselected,theitemwillautomaticallypopfromtheselectedlisttotheunselectedlistSelectionlist;支持关键字搜索，输入框显示选中的号码；结构代码数据(){return{unselList:[],//未选择的数组selectedList:[],//选择的数组s_arr:[],//v-model绑定选项数组add_tag:true,//新的选项标签allList:[],//selectallv-modelbindingoptionarrayinit_list:[]//selectallselectedarray}}根据s_arr的长度是否为总长度来判断是全选还是取消全部逻辑代码//全选/取消全部selectselectAllFun(isAll){constself=thissetTimeout(()=>{self.s_arr=[]if(isAll){//选择所有self.selectedList=[]self.init_list.forEach(item=>{//复制进来这种方式不会只是复制对象的别名（只复制别名会导致意想不到的变化）self.selectedList.push(item)})self.unselList=[]self.allList.forEach(item=>{self.s_arr.push(item)})}else{//取消全选self.selectedList=[]self.unselList=[]self.init_list.forEach(item=>{self.unselList.push(item)})self.s_arr=[]}},0)},add_or_del(o){constself=thistry{self.selectedList.forEach(function(item){if(item.value===o.value){self.add_tag=falsethrownewError('')}})}catch(e){return''}self.add_tag=truereturn''},selectOption(o){constself=thisif(o.value!=='all'){setTimeout(()=>{self.add_or_del(o)if(self.add_tag){try{self.unselList.forEach(function(item,index){if(item.value===o.value){self.unselList.splice(index,1)thrownewError('')}})}catch(e){//console.log(e)}self.selectedList.push(o)}else{try{self.selectedList.forEach(function(item,index){if(item.value===o.value){self.selectedList.splice(index,1)thrownewError('')}})}catch(e){//console.log(e)}self.unselList.push(o)}},100)}},openChange(isopen){if(!isopen){varres=this.backList_handle(this.selectedList)this.$emit('func',res)}},//返回选项列表处理backList_handle(list){if(isArray(list)){varres=[]list.forEach(item=>{res.push(item.value)})returnres}},allList_setValue(){constself=thisself.unselList.forEach(temp=>{self.allList.push(temp.value)self.init_list.push(temp)})},//拿到的选项处理selList_handle(trans,unsel){constself=thissetTimeout(()=>{if(trans&&trans.length>0){constsel=[]constun_sel=[]unsel.for每个（函数（项目，索引）{如果（项目.value&&trans.indexOf（项目.value）！==-1）{sel.push（项目）}否则如果（项目.value&&trans.indexOf（项目。value)===-1){un_sel.push(item)}})self.selectedList=sel//s_arr只保存值self.selectedList.forEach(item=>{self.s_arr.push(item.value)})self.unselList=un_selconstres=this.backList_handle(self.selectedList)this.$emit('func',res)}elseif(trans&&trans.length===0){self.selectedList=[]self.unselList=[]self.init_list.forEach(item=>{self.unselList.push(item)})self.s_arr=[]constres=this.backList_handle(self.selectedList)this.$emit('func',res)}},0)}selectAllFun：处理全选和取消全选事件，参数isAll判断当前进程是全选还是取消全选事件add_or_del：判断是增加还是删除选项，设置标签相应add_tagselectOption：选择一个事件，并根据相应的删除和添加处理给add_tagopenChange：展开下拉框折叠事件，在collapsed此时将获取到的选项组合传递给父组件allList_setValue：第一次获取未选中的数组时，保存在allList和init_list中（定义见数据）selList_handle：处理期间从父组件获取的选中组件初始化。ApplicationimportCsearchfrom'../c-search/index.vue'components:{Csearch},importimport————>组件注册——>Usingparent——>子参数：placeholder：父组件传递的输入提示文字trans_unselList：父组件传递的未选中列表isdisabled：父组件传递的选择器的禁用状态trans_selList：父组件传递的选中列表事件钩子//获取选中水果getFruitGroup_List(list){this.sel_FruitGroup_List=list...dosomething}getFruitGroup_List：获取选中水果github完整代码：https://github.com/littleOneYuan/c_select