ww

packages/agMutionCheckbox/src/index.vue

@@ -10,7 +10,7 @@
     >
         <span class="el-dropdown-link">
             <span>
-              <span :class="{ color: checkedList.length }">{{ dropdownvalue }}</span
+              <span :class="{ color: checkedList.length }">{{ checkedList.length==0?placeholder:dropdownvalue }}</span
               ><span class="list-length" v-if="valuelength >= 1"
                 >+ {{ valuelength }}</span
               ></span
@@ -89,8 +89,13 @@
             olddatas:[
                 {label:"方法1",value:"1"},
                 {label:"方法2",value:"2"}
-            ]
+            ],
+            oldvalue:[]
         };
+    },
+    model: {  
+      prop: 'value', // 明确指定 prop 为 'value'  
+      event: 'onSearch' // 自定义事件名，用于更新 value  
   }, 
     mounted() { 
         if(this.datas&&Array.isArray(this.datas)){
@@ -103,6 +108,26 @@
                     }
                     if(this.value){
                         this.checkedList=this.value;
+                        const filters=this.olddatas.filter((f)=>{
+                            return this.checkedList.find((c)=>c==f.value);
+                        });  
+                        if(filters.length>0){
+                          const [onedatas,...otherdatas]=filters;
+                          this.valuelength=otherdatas.length;
+                          this.dropdownvalue=onedatas.label;
+                          if(filters.length==this.olddatas.length){
+                              this.checkAll=true;
+                              this.isIndeterminate=false;
+                            }else{
+                              this.checkAll=false;
+                              this.isIndeterminate=true;
+                            }
+                        }else{
+                          this.valuelength=0;
+                          this.dropdownvalue="";
+                          this.checkAll=false;
+                          this.isIndeterminate=false;
+                        } 
                     } 
                 }else{
                     this.olddatas=Object.assign([],this.dataList);
@@ -121,6 +146,26 @@
                     }
                     if(this.value){
                         this.checkedList=this.value;
+                        const filters=this.olddatas.filter((f)=>{
+                            return this.checkedList.find((c)=>c==f.value);
+                        });  
+                        if(filters.length>0){
+                          const [onedatas,...otherdatas]=filters;
+                          this.valuelength=otherdatas.length;
+                          this.dropdownvalue=onedatas.label;
+                          if(filters.length==this.olddatas.length){
+                              this.checkAll=true;
+                              this.isIndeterminate=false;
+                            }else{
+                              this.checkAll=false;
+                              this.isIndeterminate=true;
+                            }
+                        }else{
+                          this.valuelength=0;
+                          this.dropdownvalue="";
+                          this.checkAll=false;
+                          this.isIndeterminate=false;
+                        } 
                     }
                 } else{
                     this.olddatas=Object.assign([],this.dataList);
@@ -137,7 +182,8 @@
             this.checkAll=false;
         },
         checkeddown(val){ 
-           console.log(val,"val")
+           this.oldvalue={list:this.checkedList,checkAll:this.checkAll,isIndeterminate:this.isIndeterminate};
+
 
         },
         dropdownchange(){
@@ -152,21 +198,42 @@
             this.isIndeterminate = false;
             this.checkAll=val; 
         },
-        confirm(e){  
+        confirm(e,type){    
+            if(e&&type=="only"){
+                this.checkedList=[e.value];
+                if(this.olddatas.length!=1){
+                  this.isIndeterminate=true;
+                  this.checkAll=false;
+                }else{
+                  this.isIndeterminate=false;
+                  this.checkAll=true;
+                }
 
-
-            if(e&&e.label=="only"){
                 const filters=this.olddatas.filter((f)=>{
-                     return e.value.find((c)=>c==f.value);
+                     return f.value==e.value
                 }); 
-                const [onedatas,...otherdatas]=filters;
-                this.valuelength=otherdatas.length;
-                this.dropdownvalue=onedatas.label;
-
                 if(this.$listeners.onSearch){
                     this.$emit("onSearch",[e.value]);
                 }  
+                if(filters.length==0){ 
+                  this.valuelength=0;
+                  this.dropdownvalue="";  
+                  this.$refs.multioncheckref.hide();
+                  return;
+                }
+                const [onedatas,...otherdatas]=filters;
+                this.valuelength=otherdatas.length;
+                this.dropdownvalue=onedatas.label;  
             }else{
+                if(this.checkedList.length==0){
+                  this.valuelength=0;
+                  this.dropdownvalue="";  
+                  if(this.$listeners.onSearch){
+                      this.$emit("onSearch",this.checkedList);
+                  } 
+                  this.$refs.multioncheckref.hide();
+                  return;
+                }
                 const filters=this.olddatas.filter((f)=>{
                      return this.checkedList.find((c)=>c==f.value);
                 });  
@@ -193,6 +260,10 @@
             } 
         },
         cancel(){ 
+          this.checkedList=this.oldvalue.list;
+          this.isIndeterminate=this.oldvalue.isIndeterminate;
+          this.checkAll=this.oldvalue.checkAll;
+
             this.$refs.multioncheckref.hide();
         }
 

src/App.vue

@@ -54,7 +54,7 @@
     </agUpdate>
     <ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue"> 
     </ag-form>
-    <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch"> </ag-mution-checkbox>
+    <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" placeholder="请选择" v-model="checkvalue"> </ag-mution-checkbox>
     <!-- <el-input agMultionCheckbox
       size="small"
       placeholder="请输入内容"
@@ -141,6 +141,7 @@ export default {
       },
       inputValue:"",
       date_value:null,
+      checkvalue:['2'],
       value: "选项1",
       a_value: "59584",
       values: ["4",""], 
@@ -471,7 +472,7 @@ export default {
       this.$refs.ttt.values;
     },
     onCheckSearch(val){
-      console.log(val,'onCheckSearch');
+      console.log(val,'onCheckSearch',this.checkvalue);
     },
     changes(val) {
       console.log(val);