packages/agQuery/src/index.vue

@@ -9,9 +9,8 @@
         <el-form label-position="left" size="small" :model="values" :inline="false"  v-if="inputs.length>0" ref="queryformref">
             <ag-row>
                 <ag-col :span="12" v-for="(item,index) in inputs" :key="index">
-                <el-form-item :label="item.label" :rules="item.rules" :prop="item.name"> 
-                    <ag-input :placeholder="item.placeholder" :value="item.value||''" closeable v-if="item.elem=='el-input'" @change="onSelect($event,item,index)"/>
-                    <ag-select :placeholder="item.placeholder" :value="item.value||''" closeable v-if="item.elem=='el-select'" :options="item.options" style="width:100%" @change="onSelect($event,item,index)"/>
+                <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">  
+                    <ag-select :placeholder="item.placeholder" :value="item.value||''" closeable :options="item.options" style="width:100%" @change="onSelect($event,item,index)"/>
                 </el-form-item> 
             </ag-col> 
          </ag-row>
@@ -53,6 +52,15 @@
           return [];
         },
       }, 
+      props:{
+        type: Object,
+        default: () => {
+          return { 
+            lazyLoad (node, resolve) { 
+            }
+          };
+        }, 
+      }
     },
     model: {  
       prop: 'values', // 明确指定 prop 为 'value'  
@@ -61,14 +69,18 @@
      mounted(){  
        let newinput=this.inputs.map((g)=>g.label); 
        this.placeholder="请选择"+newinput.join("/");
+       if(this.props.lazyLoad){
+             this.props.lazyLoad({level:0,pathLabels:this.values,value:""},(datas)=>{
+                this.inputs[index+1].options=datas;
+              }); 
+       }
     },
     data() {
       return {
         values: {},
         placeholderValue:"",
         placeholder:"请选择",
-        popState:false,
-        
+        popState:false, 
       }
     }, 
     methods: {
@@ -76,22 +88,26 @@
          this.values={};
          this.$emit('onSearch',this.values);
       },
-      onSelect(value,item,index){  
+      onSelect(value,item,index){   
           item.value=value;   
           this.$set(this.inputs,index,item);
           let newvalues={};
+         
           let newplaceholderValue=[];
-          this.inputs.map((g)=>{
-            if(g.value&&g.name){
-              newvalues[g.name]=g.value;  
-              g.options.find((f)=>f.value==g.value).label&&(newplaceholderValue.push(g.options.find((f)=>f.value==g.value).label)); 
-            } 
-          });
-          if(this.$listeners.change){
-             this.$emit('change',newvalues);
-          }
-              this.values=newvalues;
-              this.placeholderValue=newplaceholderValue.join("/")
+            this.inputs.map((g)=>{
+              if(g.value&&g.name){
+                newvalues[g.name]=g.value;  
+                g.options.find((f)=>f.value==g.value).label&&(newplaceholderValue.push(g.options.find((f)=>f.value==g.value).label)); 
+              } 
+            });
+            this.values=newvalues;
+            if(this.$listeners.change){
+              this.$emit('change',newvalues);
+            }
+            this.props.lazyLoad({level:index+1,pathLabels:newvalues,value},(datas)=>{
+                this.inputs[index+1].options=datas;
+              }); 
+            this.placeholderValue=newplaceholderValue.join("/")
       },
       onCancel(){
         this.popState=false;

src/App.vue

@@ -218,7 +218,7 @@ export default {
         },
         {
           label:"型号",
-          elem:'el-select',
+          elem:'el-input',
           name:"model",
           options: []
         },