码迷,mamicode.com
首页 > 其他好文 > 详细

iview 框架的 table render 填坑

时间:2019-07-30 12:50:27      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:rop   readonly   code   only   alq   settime   cursor   his   log   

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;
    }
}

 

iview 框架的 table render 填坑

标签:rop   readonly   code   only   alq   settime   cursor   his   log   

原文地址:https://www.cnblogs.com/wen233/p/11269264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!