iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table>

     discountData: {
                    total: 1, rows: [
                        {
                            randomDiscountRangeMax: '',
                            randomDiscountRangeMin: '',
                            population: ''
                        },
                    ],
                    defaultRows:
                        {
                            randomDiscountRangeMax: '',
                            randomDiscountRangeMin: '',
                            population: ''
                        },
                }
                
 
 
    discountColumns: [
                    {
                        key: 'randomDiscountRange',
                        align: 'center',
                        title: '随机立减范围',
                        render: (h, params) => {
                            var me = this
                            return h('div', [h('Input', {
                                props: {
                                    type: 'text',
                                    value: me.discountData.rows[params.index].randomDiscountRangeMin,
                                    disabled: this.getIsDetail(),
                                },
                                style: {
                                    width: '100px'
                                },
                                on: {
                                    'on-blur': (event) => {
                                        me.discountData.rows[params.index].randomDiscountRangeMin = event.target.value
                                    }
                                }
                            }),
                                h('span', '元<=随机立减金额<'),
                                h('Input', {
                                    props: {
                                        type: 'text',
                                        value: me.discountData.rows[params.index].randomDiscountRangeMax,
                                        disabled: this.getIsDetail(),
                                    },
                                    style: {
                                        width: '100px'
                                    },
                                    on: {
                                        'on-blur': (event) => {
                                            this.discountData.rows[params.index].randomDiscountRangeMax = event.target.value
                                        }
                                    }
                                }),
                                h('span', '元')])
                        }
                    },
                    {
                        key: 'population',
                        align: 'center',
                        title: '概率',
                        width: 300,
                        render: (h, params) => {
                            var me = this
                            return h('div', [h('Input', {
                                props: {
                                    type: 'text',
                                    value: me.discountData.rows[params.index].population,
                                    disabled: this.getIsDetail(),
                                },
                                style: {
                                    width: '100px'
                                },
                                on: {
                                    'on-blur': (event) => {
                                        this.discountData.rows[params.index].population = event.target.value
                                    }
                                }
                            }), h('span', '%')])
                        }
                    }, {
                        key: 'operation',
                        align: 'center',
                        title: '操作',
                        width: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        shape: 'circle',
                                        icon: 'plus',
                                        disabled: this.getIsDetail(),
                                    },
                                    style: {
                                        display: params.index !== 0 ? 'none' : 'inline'
                                    },
                                    on: {
                                        click: () => {
                                            this.add('discountData')
                                        }
                                    }
                                }), h('Button', {
                                    props: {
                                        type: 'primary',
                                        shape: 'circle',
                                        icon: 'minus',
                                        disabled: this.getIsDetail(),
                                    },
                                    style: {
                                        display: params.index === 0 ? 'none' : 'inline'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index, 'discountData')
                                        }
                                    }
                                })
                            ])
                        }
                    }
                ]
                
 

 add (dataName) {
                var obj = JSON.parse(JSON.stringify(this[dataName].defaultRows))
                this[dataName].rows.push(obj)
            }
            
 remove (index, value) {
                this[value].rows.splice(index, 1)
           }  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–销售订单处理:自库存销售(109)-3发货

VL10C交货处理 在此活动中,创建交货。 角色仓库文员 后勤 ®后勤执行®外向处理®外向交货的发货 ®外向交货®创建®交货凭证到期日的集中处理 ®销售订单项目...

3203
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–客户寄售(119)-2寄售补货

一、VA01寄售补货订单 寄售补货不完全代表实际向客户销售货物。但是,订单输入使用的机制与标准订单输入相同。例如,当输入订单时,系统将对物料执行可用性检查并自动...

3735
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–含客户预付款的销售订单处理(201)-5发货

VL10C交货处理 在此活动中,创建交货。 后勤 ®后勤执行 ® 外向处理 ® 外向交货的发货 ® 外向交货 ® 创建 ® 交货凭证到期日的集中处理 ®销售订单...

3096
来自专栏架构师之旅

【Java SE】Java NIO系列教程(八) SocketChannel

英文:Jakob Jenkov 译文:ifeve - 郑玉婷 链接:http://ifeve.com/socket-channel/ Java NIO中的Soc...

2077
来自专栏Ryan Miao

spring boot 添加拦截器

构建一个spring boot项目。 添加拦截器需要添加一个configuration @Configuration @ComponentScan(basePa...

4008
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–按计划协议的销售(231)-3发货

一、VL10E交货到期清单 在此活动中,可以处理交货到期清单,以便创建交货凭证。 角色仓库文员 后勤 → 后勤执行 → 外向处理→外向交货的发货→ 外向交货→ ...

4696
来自专栏Python

利用ForgeryPy生成虚拟数据

 在程序研发过程中,我们往往需要大量的虚拟实验数据。Python中有多个包可以用于生成虚拟数据,其中功能较为完善的是ForgeryPy。

840
来自专栏架构师之旅

【Java SE】Java NIO系列教程(一) Java NIO 概述

Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但在我看来...

2057
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–现金销售(238)-2销售、发货

一、 VA01创建销售订单 在此活动中,输入现金销售订单。 1. 在 创建销售订单:初始屏幕 上,输入以下数据: 字段名称用户操作和值注释订单类型BV...

4085
来自专栏javathings

Java NIO 实现网络通信

Java NIO 的相关资料很多,对 channel,buffer,selector 如何相关概念也有详细的阐述。但是,不亲自写代码调试一遍,对这些概念的理解仍...

2172

扫码关注云+社区