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 条评论
登录 后参与评论

相关文章

来自专栏java 成神之路

Spring mvc ContextLoaderListener 原理解析

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

SAP最佳业务实践:SD–免费交货(110)-2业务处理

VA01销售订单输入 在本活动中,您将输入一个销售订单。 角色销售助理 如果您已在系统中安装“可退还包装物处理”业务情景,并使用物料 H11,可能会出现如下警...

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

SAP最佳业务实践:SD–潜在客户销售订单处理(113)-3发货、发票

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

3517
来自专栏女程序员的日常

STM8S——Analog/digital converter (ADC)

1、ADC1 and ADC2 are 10-bit successive approximation Anolog to Digital Converters...

2781
来自专栏架构师之旅

【Java SE】Java NIO系列教程(六) Selector

Selector(选择器)是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件。这样,一个单独的线程可以管理多个cha...

1725
来自专栏Ryan Miao

spring boot 添加拦截器

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

3868
来自专栏javathings

Java NIO 实现网络通信

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

1222
来自专栏Aloys的开发之路

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts2.dispatcher.

使用Eclipse启动Maven+Struts项目报错,报错日志如下: 2016-08-31 22:00:47 INFO ContextLoader:325 ...

2175
来自专栏大数据架构

Java进阶(五)Java I/O模型从BIO到NIO和Reactor模式

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

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

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

3435

扫码关注云+社区