iview 框架的 table render 填坑

Posted wen233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
    

 

以上是关于iview 框架的 table render 填坑的主要内容,如果未能解决你的问题,请参考以下文章

iview table render 进阶

iview table行render渲染不同的组件

iview的table中点击Icon弹Poptip,render函数的写法

iview 在Table组件render 中使用Poptip组件 阿星小栈

Vue+IView使用过程中使用Table组件Render不生效问题

VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题