vue⽂本框默认值_vue+elementUI动态⽣成查询表单并设置默
认值
调⽤组件(⽗组件)：
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",
html内容文本框
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。