文章目录一、问题二、解决方案一、问题提示el-select的filterable单独过滤筛选使用正常全选按钮单独使用也正常但是两者结合使用的时候先过滤再全选会导致数据不正常目标过滤后的全选希望值增加所过滤的所有相但是实际会将整体下拉项都选中二、解决方案自定义filter-method过滤事件与状态判断修改封装组件MySelectAll.vuetemplatediv!--div{{checkAll}}-{{indeterminate}}-{{flterMsg}}-{{values}}/div--el-select blurblurFunv-modelvalues:filter-methodhandleFiltermultiple collapse-tags clearable filterable stylewidth: 100%changehandleChecktemplate #headerel-checkbox v-modelcheckAll:indeterminateindeterminatechangehandleCheckAll全部/el-checkbox/templateel-option v-foritem in filteredOptions:keyitem:labelitem.name:valueitem.value//el-select/div/templatescript setupimport{ref,watch,onMounted}fromvueconstemitdefineEmits([update:modelValue])constpropsdefineProps({// 传入查询关键字options:{type:Array,default:()[]},modelValue:{// 父组件 v-model 时数据没有指定参数名所以此时属性modelValue会接收到v-model变量 即 flag1type:Array,default:()[]}})letlistref(props.options||[])letfilteredOptionsref(props.options||[])letvaluesref(props.modelValue||[])constcheckAllref(false)constindeterminateref(false)letflterMsgref(undefined)watch([()values.value,()flterMsg.value],([val,msg]){// 需要监听过滤字段 也触发对用状态判断效果leta1if(a2){console.log(msg)}if(valnull||valundefined){checkAll.valuefalseindeterminate.valuefalse}else{if(val.length0){checkAll.valuefalseindeterminate.valuefalse}else{lethasAllSonfilteredOptions.value.every(eleval.includes(ele.value))lethasNoAllSonfilteredOptions.value.every(ele!val.includes(ele.value))if(hasNoAllSon){checkAll.valuefalseindeterminate.valuefalse}elseif(hasAllSon){checkAll.valuetrueindeterminate.valuefalse}else{checkAll.valuetrueindeterminate.valuetrue}}}},{deep:true,immediate:true})watch(()props.options,val{list.valueval filteredOptions.valueval},{deep:true,immediate:true})consthandleFiltermsg{flterMsg.valuemsg filteredOptions.valuelist.value.filter(itemitem.name.includes(msg))}constblurFun(){console.log(1)flterMsg.valueundefined}consthandleCheckAllval{console.log(val)indeterminate.valuefalseif(val){letarrJSON.parse(JSON.stringify(values.value))letarr2filteredOptions.value.map(__.value)values.value[...newSet([...arr,...arr2])]}else{letarrJSON.parse(JSON.stringify(values.value))letarr2filteredOptions.value.map(__.value)values.valuearr.filter(_!arr2.includes(_))}emit(update:modelValue,values.value)}consthandleCheck(){emit(update:modelValue,values.value)}// 生命周期onMounted((){})/scriptstyle langscssscoped/style使用组件MySelectAll v-modelnetworkNameList:optionsnetworkNameArrplaceholder请选择网络名称/MySelectAll// networkNameList为双下个绑定选择值// options为下拉数据
