最近遇到这么个场景的问题,一个页面中数量不定的报表,而每个报表不同点只是字段不同以及生产报表的地址不同而已,这个时候可以使用v-for去动态生成组件。字段也是动态生成,这时候就遇到了问题
例如效果:以下页面都是通过json数据动态构造生成
json格式:
list: [
{
title: "库存业务>出入库详情",
propList: [
{
prop: "customerCode",
label: "客商编码"
},{
prop: "customerName",
label: "客商名称"
},{
prop: "productCode",
label: "产品编码"
},{
prop: "productName",
label: "产品名称"
},{
prop: "wareHouseCode",
label: "仓库编码"
},{
prop: "wareHouseName",
label: "仓库名称"
}
],
obj:{},
url:""//生成结果的url
},
{
title: "库存业务>实时库存",
propList: [
{
prop: "supplierCode",
label: "供应商编码"
},{
prop: "supplierName",
label: "供应商名称"
},{
prop: "productCode",
label: "产品编码"
},{
prop: "productName",
label: "产品名称"
},{
prop: "wareHouseCode",
label: "仓库编码"
},{
prop: "wareHouseName",
label: "仓库名称"
}
],
obj:{},
url:""//生成结果的url
}
]
组件模块
<template>
<div class="feed-container">
<el-col :span="12" v-for="(component,index) in componentList" :key="index">
<div class="card">
<div class="title">
<span>{{component.title}}</span>
</div>
<div class="card-body">
<el-form>
<el-col :span="12" v-for="(item,i) in component.propList" :key="i">
<el-form-item :label="item.label">
<el-input size="mini" v-model="component.obj[item.prop]"></el-input>
</el-form-item>
</el-col>
</el-form>
</div>
<div class="create">
<el-button size="mini" type="primary" @click="create(component.obj)">生 成</el-button>
</div>
</div>
</el-col>
</div>
</template>
<script>
export default {
props: {
feedBackComponents: {
type: Array,
default: () => []
}
},
data() {
return {
componentList: [],
};
},
created() {
this.componentList = [ ...this.feedBackComponents ];
this.componentList.forEach(item => {
item.propList.forEach(items => {
item.obj[items.prop] = "";//构造输入框的字段
});
});
},
methods: {
create(item) {
console.log(item);
}
}
};
</script>
<style lang="scss" scoped>
.card {
position: relative;
margin: 10px;
height: 250px;
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
&:hover {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.title {
padding: 10px;
background: #108ee9;
color: #fff;
font-size: 14px;
}
.card-body {
background: #fff;
margin-top: 20px;
}
.el-form-item {
margin-bottom: 10px;
}
.create{
position: absolute;
bottom: 10px;
right: 10px;
}
}
</style>
以上可以看到预留一个Obj
对象用来储存propList
中的prop
的值作为key
(属性),而vue中双向绑定绑定的事属性而不是值。所以这就是为什么如果直接使用item.prop去绑定每个字段的值只是显示值而已的原因。因为这个时候绑定的其实是prop
。其中的customerCode
和customerName
只是prop
的值而已
所以构建出来obj这个对象为:
obj:{
customerCode:"",
customerName:""
}
那么就可以通过绑定component.obj[item.prop]
,这里绑定的就是customerCode
和customerName
属性
咻咻~~