问答

vue + element 组件传值后赋值问题

作者:admin 2021-08-06 我要评论

这是我通过点击列表得到初始数据的方法 rowClick (row) { if (row) { console.log(row) this.rowList = row this.slideOutAttr.selectedAssignId = row.assignId...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

这是我通过点击列表得到初始数据的方法

rowClick (row) {
          if (row) {
              console.log(row)
          this.rowList = row
          this.slideOutAttr.selectedAssignId = row.assignId
          this.slideOutAttr.visiblity = true
          this.slideOutAttr.size = window.innerWidth * 0.6
          }
      },

然后我去赋值:

 watch: {
        'visible': {
            handler: function (newVal, oldVal) {
                console.log(newVal)
                if (newVal) {
                    console.log(this.rowList)
                    if (this.rowList.customerId && this.rowList.customerId !== '') {
                        getAvailable(this.rowList.customerId).then(res => {
                            this.codeList.availableList = res.data
                            console.log(this.codeList.availableList)
                        })
                            this.goodsList = []
                            if (this.rowList.customerId !== '') {
                                getAvailable(this.rowList.customerId).then(res => {
                                    this.goodsList.push(res.data)
                                    console.log(this.goodsList)
                                })
                            }
                            this.assignInfoList = this.rowList
                            console.log(this.assignInfoList)
                            this.serialNo = this.assignInfoList.orderAssignInnerList.length
                        
                    } else {
                        this.assignInfoList = {
                            orderAssignInnerList: []
                        }
                        this.serialNo = 0
                    }
                    this.currentSelectId = 0

                    this.tempId = 0
                    this.orderAssignInnerList = []
                    this.addNewDetail()
                }
            },
            deep: true
        }
    },
tableRowClassName (row) {
            // 把每一行的索引放进row
            row.row.index = row.rowIndex
        },
        generateId () {
            this.tempId = --this.tempId;
        },
        generateSerialNumber () {
            this.serialNo = ++this.serialNo;
        },
        // 信息-添加行
        addNewDetail () {
            const that = this
            that.generateId();
            that.generateSerialNumber();
            console.log(that.assignInfoList.orderAssignInnerList)
            that.assignInfoList.orderAssignInnerList.push({
                detailId: that.tempId,
                serialNumber: that.serialNo
            })
            console.log(that.tempId)
            console.log(that.serialNo)
            // console.log(that.orderAssignInnerList)
        },

然后就发现数据出现了错误:
image.png
表格里面我下拉框选择数据会发现数据填写在下一行 错位了,同时序号的初始化没有生效,不刷新会一直增加

###
 watch: {
        'visible': {
            handler: function (newVal, oldVal) {
                console.log(newVal)
                if (newVal) {
                    console.log('this.rowList', this.rowList)
                    if (this.rowList.orderAssignInnerList && this.rowList.orderAssignInnerList.length > 0) {
                        this.rowList.orderAssignInnerList.map(item => {
                            item.detailId = this.tempId
                            this.generateId()
                            item.serialNumber = this.serialNo
                            this.generateSerialNumber()
                        })
                        getAvailable(this.rowList.customerId).then(res => {
                            this.codeList.availableList = res.data
                            console.log(this.codeList.availableList)
                        })
                        this.goodsList = []
                        if (this.rowList.customerId !== '') {
                            getAvailable(this.rowList.customerId).then(res => {
                                this.goodsList.push(res.data)
                                console.log(this.goodsList)
                            })
                        }
                        this.assignInfoList = this.rowList
                        console.log(this.assignInfoList)
                        this.serialNo = this.assignInfoList.orderAssignInnerList.length
                        console.log('索引' + this.serialNo)

                    } else {
                        this.assignInfoList = {
                            orderAssignInnerList: []
                        }
                        this.serialNo = 0
                        this.addNewDetail()
                    }
                    this.currentSelectId = 0
                    this.tempId = 0
                    this.orderAssignInnerList = []
                }
            },
            deep: true
        }
    },
###

没看出来你那里有二次赋值的操作

不过看你这个数据,比较像整体就没做数据观察

list 修改的时候可以使用 splice 。对象修改的时候使用 $set

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue + element 组件传值后赋值问题

    vue + element 组件传值后赋值问题

  • taro 中微信小程序转h5时,TarBar 出现

    taro 中微信小程序转h5时,TarBar 出现

  • 你遇到过elementUI 哪些坑?大概说下哪

    你遇到过elementUI 哪些坑?大概说下哪

  • libreoffce office word 转 html,转换

    libreoffce office word 转 html,转换

腾讯云代理商
海外云服务器