最近遇到这么个场景的问题，⼀个页⾯中数量不定的报表，⽽每个报表不同点只是字段不同以及⽣产报表的地址不同⽽已，这个时候可以使⽤v-for去动态⽣成组件。字段也是动态⽣成，这时候就遇到了问题 例如效果：以下页⾯都是通过json数据动态构造⽣成
json格式:
list: [
{
title: "库存业务>出⼊库详情",
propList: [
{
prop: "customerCode",
},{
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-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() {
thisponentList = [ ...this.feedBackComponents ];
thisponentList.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;
}
.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属性
咻咻~~
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议