vue+elementUI 动态生成查询表单并设置默认值

调用组件（父组件）：

<fuzzy-search :inquireData="fuzzyFrom" @fuzzySearch="searchAgvReport" ref="fuzzySearch"/>

<script>
import fuzzySearch from "./components/FuzzySearch/defaultSearch.vue";
export default {
  name: "barChart",
  components: { fuzzySearch },
  data() {
    return {
      fuzzyFrom:{
        formItems:[
          {flag: "timer", name: "startTime",value:new Date(new Date()-(60*60*24*30*1000))},
          { flag: "timer", name: "endTime",value:new Date()},
          {flag:"select" ,name:'code',selectList:[{id:3,name:'日'},{id:1,name:'月'},{id:2,name:'年'}],value:3}
        ]
      },
    };
  },
</script>

查询组件（子组件）

<template>
  <div>
    <el-button @click="handleSearch">查询</el-button>
    <div class="sigle">
      <el-form label-position="left" :inline="true" :model="inquireData">
        <el-form-item   v-for="(item,index) in inquireData.formItems"
          :label="item.label"   :key="index"   v-if="item.flag==='input'" >
            <el-input v-model="item.value" style="width:200px"/>
        </el-form-item>

        <el-form-item
          v-else-if="item.flag==='select'"
          :label="item.label"
        >
          <el-select v-model="item.value">
            <el-option
              v-for="(opt, index) in item.selectList"
              :key="index"
              :value="opt.id"
              :label="opt.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item 
            v-else-if="item.flag==='timer'" 
            :label="$t('fuzzySearch.'+item.name)">
          <el-date-picker v-model="item.value" type="date" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Moment from 'moment'
export default {
  name: "fuzzySearch",
  props: {
    inquireData: {
      type: Object,
      default() {
        return {formItems:[]};
      }
    },
  },
  data() {
    return { };
  },
  watch: {
  },
  methods: {
    handleSearch() {
      let self = this;
      let searchParams = [];
      let params={};
      searchParams = self.inquireData.formItems; 
      for (let i in searchParams) {
        let value = searchParams[i].value;
        if(!value || value ===""){ //去除空值
          if(typeof(value) != "boolean"){ //布尔值需要保留
            continue;
          }
        }
        if(searchParams[i].flag === "timer"){
          params[searchParams[i].name] = Moment(value).format('YYYY-MM-DD HH:mm:ss')
        }else{
          params[searchParams[i].name] = value;
        }
      }
      this.$emit("fuzzySearch", params);
    },
  }
};
</script>

实际上就是利用vue props 直接传入 表格的数据 并 把 v-model 直接设置为 传入的form item.value