iview 框架的 table render 填坑

totalQuantity: (h, params, row) => {
    params.row.totalQuantity = params.row.totalQuantity || params.row.ownQuantity + params.row.canUseQuantity // 要从2个字段取值作处理
    return h('InputNumber', {
        attrs: {
            title: params.row.totalQuantity,
            value: params.row.totalQuantity
        },
        props: {
            readonly: params.row.channel !== 2,
            min: 1,
            precision: 0
        },
        on: {
            'on-focus': (e) => {
                if (params.row.channel !== 2) {
                    _this.$Message.warning({
                        content: '只可修改 002 的数据。',
                        duration: 4
                    })
                }
            },
            'on-change': (val) => {
                if (val) {
                    console.log('valval', val)
                    params.row.totalQuantity = val || 1
                    _this.orderList[params.index] = params.row // 改完赋值一下
                } else {
                    // 处理 iview 框架把值全部删除时候的坑，这里连续赋值2次触发 input组件的赋值功能
                    console.log('!!!val', val)
                    params.row.totalQuantity = 0
                    setTimeout(() => {
                        params.row.totalQuantity = val || 1
                        _this.orderList[params.index] = params.row
                    })
                }
            }
        }
    })
}

// 样式好一些
.ivu-input-number-input {
    &[readonly="readonly"] {
        cursor: not-allowed;
    }
}

 

转载于:https://www.cnblogs.com/wen233/p/11269264.html