vue文本框默认值_vue+elementUI 动态生成查询表单并设置默认值
调用组件(父组件)：import fuzzySearch from "./components/FuzzySearch/defaultSearch.vue";export default {name: "barChart",components: { fuzzySearch },data() {return {fuzzyFrom:{formItems:[{flag: "timer", name:
调用组件(父组件)：
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==='select'"
:label="item.label"
>
v-for="(opt, index) in item.selectList"
:key="index"
:value="opt.id"
:label="opt.name"
/>
v-else-if="item.flag==='timer'"
:label="$t('fuzzySearch.'+item.name)">
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);
},
}
};
实际上就是利用vue props 直接传入 表格的数据 并 把 v-model 直接设置为 传入的form item.value
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)