需求:在el-dropdown下拉框中实现点击选项动态在页面添加组件,组件的内容传给页面(父组件)后,父组件触发事件统一提交
方法:使用ref属性传值
在子组件中,把要传的值绑定ref
<el-table :data="brands" fit style="width: 100%" ref="brands">
<el-input v-model="monthlySale" placeholder="请输入" ref="monthlySale">
data() {
return {
distributeType: "",
monthlySale: "",
annualSale: "",
brands: [{}]
};
},
在父组件中接收子组件内容
<distribution-material
v-for="i in selectedDistriVariety"
:key="i.lineCode"
:title="i.lineName"
ref="distributionmaterial"
>
</distribution-material>
data() {
return {
distributionForm: {
list: [{
brands: [{}]
}]
}
}
submit() {
this.distributionForm.customerNo = this.customerNo
for(let i=0;i<this.$refs.distributionmaterial.length;i++){
// 这里是为了让list数量跟得上子组件传回的值的数量,否则报错
// 本身data里面已经定义了一个list,因此当i>0时才再增加一个list
if(i>0) {
this.distributionForm.list.push({})
}
console.log("this.$refs",this.$refs);
console.log(this.distributionForm.list);
this.distributionForm.list[i].address = this.address
this.distributionForm.list[i].annualSale =
this.$refs.distributionmaterial[i].annualSale
this.distributionForm.list[i].areaZh = this.areaZh
this.distributionForm.list[i].brands = this.$refs.distributionmaterial[i].brands
this.distributionForm.list[i].cityZh = this.cityZh
this.distributionForm.list[i].customerNo = this.customerNo
this.distributionForm.list[i].distributeType =
this.$refs.distributionmaterial[i].distributeType
}