【bug】el-input-number null值数据回显0,vxe-table中使用,踩坑记

bug如下:
在vex-table可编辑列表中使用了el-input-number ,默认值为空,保存后发现输入框确实没值,但是一点击就会出现一个0。
后端返我空值,null值都不行,因为null 和空值会被el-input-number 组件处理为0,需要定义为undefined
也是昨天沟通了才知道,后端(java)是没有undefined这个概念的
所以他返我null,我要自己处理成undefined

 this.standTableList.forEach(item => {
            if (item.capitaRation == null) item.capitaRation = undefined            
            if (item.frequency == null) item.frequency = undefined
            if (item.configAmount == null) item.configAmount = undefined
          })

还有一种方法,因为vxe-table可编辑列表,其实有两个插槽,默认插槽default和编辑插槽edit
编辑插槽里放el-input-number,默认插槽里放div,然后给div设置禁用属性
这里就要说到我踩的一个坑了,设置属性是放在cell-style方法中,根据条件找到对应列,增加属性。
我遇到的这个坑是我的表头是单表头和双表头结合,有单有双。正常列索引就是从0开始依次往后加一,但是vxe-table不是的,它遇到双表头会重新从0开始,就像下面这样
在这里插入图片描述
所以找对应列的时候要细心点,不然就会像我,找这个bug花了一个多小时

 :cell-style="vxecellStyle"
// vex-table单元格样式
    vxecellStyle({ row, column, columnIndex }) {
      let rowstyle = {}       
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
          rowstyle.pointerEvents = 'none'
        }   
      return rowstyle
    },

这样直接禁止点击了,也不会出现点击有0的bug了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值