Requirements: In the el-dropdown drop-down box, the click option is dynamically added to the page. After the content of the component is passed to the page (parent component), the parent component triggers an event and submits it uniformly.
Method: Use the ref attribute to pass the value
In the child component, bind the value to be passed to 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: [{}]
};
},
Receive child component content in parent component
<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
}