本文介绍了如何在Vue中使用ElementUI动态生成查询表单，并设置表单字段的默认值。通过在父组件中定义formItems结构，包括输入框、下拉选择和日期选择，并传递给子组件。子组件接收prop `inquireData`，根据表单类型设置v-model的值。对于日期类型，使用Moment.js进行格式化。在查询时，遍历表单数据，过滤掉空值并将处理后的参数传递给父组件。
调用组件(父组件)：
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}
]
},
};
},
查询组件(子组件)
查询
:label="item.label" :key="index" v-if="item.flag==='input'" >
v-else-if="item.flag===
最低0.47元/天 解锁文章
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
