weixin_58412143 2022-05-31 14:16 采纳率: 92.6%
浏览 818
已结题

el-table的校验必填怎么实现

子组件(编辑时)添加/删除数据都没问题,但是父组件(新增时)会报错,为什么?如果不用这种表格嵌套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
                    })

            },

  • 写回答

3条回答 默认 最新

  • 菊外人小张 2022-05-31 15:09
    关注

    应该是push之前, this.tempUser没有freightTemplateInfoList这个属性,所以报push错误,建议push之前打印一下 this.tempUser看看

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 6月9日
  • 已采纳回答 6月1日
  • 创建了问题 5月31日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题