子组件（编辑时）添加/删除数据都没问题，但是父组件（新增时）会报错，为什么？如果不用这种表格嵌套el-form-item的形式可以对表格内的下拉框进行必填的验证吗？
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'push' of undefined"
TypeError: Cannot read property 'push' of undefined
at VueComponent.TakeAdd (info.vue?4445:240)
子组件
<el-form class="small-space" :model="tempUser" ref="tempUser" :rules="rules" :show-message="false">
<el-form-item label="模板名称" prop="name">
<el-input type="text" v-model="tempUser.name" placeholder="请输入模板名称"></el-input>
</el-form-item>
<el-form-item>
<template>
<div class="good-list">
<el-table :data="tempUser.freightTemplateInfoList" border class="table-list-style">
<el-table-column label="可配送区域" align="center">
<template slot-scope="scope">
<el-form-item :prop="'freightTemplateInfoList.'+[scope.$index]+'.cityIds'"
:rules="rules.cityIds">
<el-select v-model="scope.row.cityIds" multiple placeholder="请选择"
@change="selectChange(scope.row.cityIds,scope.$index)">
<el-option v-for="item in CityList" :key="item.id" :label="item.areaName"
:value="item.id"
:disabled="!CityList.includes(item.id) && selectedOptions.includes(item.id)">
</el-option>
</el-select>
<!-- </el-form-item> -->
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-form-item>
</el-form>
<div slot="footer" style="display: flex;justify-content: space-between;">
<div class="">
<el-button @click="TakeAdd()">添加</el-button>//在表格最后添加一行空数据
</div>
</div>
props: ['dialogFormVisible', 'infoShow', 'dialogStatus', 'user'],
//校验return
rules: {
cityIds: [{
required: true,
// transform: value => value ? value.trim() : '',
message: '请输入',
trigger: 'change'
}],
CityList: [], //省份列表
selectedOptions: [], //公共列表
goodsList: [], //模板信息
//参数
tempUser: {
id: '',
state: '', //状态{0:,1:}
updateUserName: '', //最后修改人
updateTime: '', //修改时间
freightTemplateInfoList: []
},
//这里可以设置初始值
obj: {
cityIds: "", //城市ids
firstWeight: "", //首重（kg）
freight: '', //首重费用
renew: '', //续重费用（/1kg）
isDelete: '', //是否删除
id: 0
},
watch: {
//监听父组件传过来的值
user(newUser, oldUser) {
this.tempUser = newUser
if (this.dialogStatus == "update") {
this.goodsList = this.user.freightTemplateInfoList
} else {
}
},
},
created() {
/* 初始化下拉可选项 */
for (let j = 0; j < this.CityList.length; j++) {
this.CityList.push({
id: this.CityList[i].id,
disabled: false
})
}
/* 初始化下拉表格数据，得到公共选项列表'selectedOptions' */
if (this.dialogStatus == "update") {
if (this.goodsList.length > 0) {
let publicArr = [];
for (let m in this.goodsList) {
publicArr = [...publicArr]
}
this.selectedOptions = publicArr;
}
} else {
if (this.tempUser.freightTemplateInfoList.length > 0) {
let publicArr = [];
for (let m in this.tempUser.freightTemplateInfoList) {
publicArr = [...publicArr]
}
this.selectedOptions = publicArr;
}
}
console.log(this.CityList)
console.log(this.selectedOptions)
},
mounted() {
this.tempUser = this.user
if (this.dialogStatus == "update") {
this.goodsList = this.user.freightTemplateInfoList
} else {
//解决新增添加后才实现动态禁用
this.goodsList = []
this.tempUser.freightTemplateInfoList=[]
}
this.$set(this.tempUser, 'goodsList', this.goodsList)
},
//添加新数据
TakeAdd() {
if (this.dialogStatus == 'update') {
console.log('ppp', this.goodsList)
this.goodsList.push(JSON.parse(JSON.stringify(this.obj)))
} else {
console.log('ppp', this.tempUser.freightTemplateInfoList)
this.tempUser.freightTemplateInfoList.push(JSON.parse(JSON.stringify(this.obj)))
}
//解决添加后选中某一值才实现动态禁用
this.selectChange()
},
/* 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除） */
selectChange() {
let arr = [];
if (this.dialogStatus == 'update') {
for (let i in this.goodsList) {
arr = [...arr, ...this.goodsList[i].cityIds]
console.log('goodsList', this.goodsList[i].cityIds) //ok
}
} else {
for (let i in this.tempUser.freightTemplateInfoList) {
arr = [...arr, ...this.tempUser.freightTemplateInfoList[i].cityIds]
console.log('goodsList', this.tempUser.freightTemplateInfoList[i].cityIds) //ok
}
}
this.selectedOptions = arr;
},
父组件
//显示新增对话框
showCreate() {
this.tempUser = {};
this.infoShow = true
this.dialogStatus = "create"
this.dialogFormVisible = true
if(this.$refs.mychild){
this.$refs.mychild.TakeAdd()
}
},
//编辑修改详情
showUpdate($index) {
this.infoShow = true
this.dialogFormVisible = true
this.dialogStatus = "update"
let user = this.list[$index];
Info({
id: user.id
}).then((data) => {
console.log(data.info.freightTemplateInfoList)
this.tempUser = data.info
this.tempUser.id = user.id
})
},
