This commit is contained in:
ln1778
parent
e2c28f3bf2
commit
baa8568ea8
|
|
@ -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,9 +89,14 @@
|
|||
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)){
|
||||
this.dataList = 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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue