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

相关文章

来自专栏机器学习实践二三事

NeuralTalk2---自动产生图片的语句描述

最近被逼看了点自然语言处理(NLP)的论文,好吧我看不懂,本来我就不是搞这个方向的,说的我迷迷糊糊的,哎,隔行如隔山啊 不过在过程中倒也是收获到了一些东西,比如...

20510
来自专栏人工智能LeadAI

毫秒级检测!你见过带GPU加速的树莓派吗?

24810
来自专栏ml

Mat转换为QImage

请留意: opencv为3.0.0版本,Qt为4.8.4版本 1 #include"image1.h" 2 #include<QApplication> ...

2579
来自专栏张善友的专栏

开源项目Generics.Net介绍

STL (标准模版库,Standard Template Library)各种不同类型的容器(container)、模板(template)、游标(Iterat...

17210
来自专栏游戏开发那些事

【python游戏编程之旅】第五篇---嗷大喵爱吃鱼小游戏开发实例

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

482
来自专栏梦里茶室

毫秒级检测!你见过带GPU的树莓派吗?

树莓派3B+英特尔神经计算棒进行高速目标检测 转载请注明作者梦里茶 ? 代码: 训练数据预处理: https://gist.github.com/ahan...

1.9K7
来自专栏贾志刚-OpenCV学堂

OpenCV 3.4发布啦!

OpenCV 3.4发布啦! ? OpenCV 3.4在2017年12月23日正式发布啦,感觉发布的速度越来越快,距离上次OpenCV 3.3仅仅不到四个月的时...

3226
来自专栏移动端开发

常用开发技巧系列(四)

一:友盟的错误日志怎么看? 先说说友盟崩溃日志怎么查看的问题, 友盟统计我自己用的是比较多的,因为这个第三方的分享也是有的,就直接把友盟集成进去,统计和第三方...

1989
来自专栏大数据挖掘DT机器学习

数据挖掘工程师:如何通过百度地图API抓取建筑物周边位置、房价信息

1.需求描述 对于数据挖掘工程师来说,有时候需要抓取地理位置信息,比如统计房子周边基础设施信息,比如医院、公交车站、写字楼、地铁站、商场等,一般的爬虫可以采用...

4009
来自专栏西安-晁州

SPA应用部署时首屏启动慢问题解决方案

使用vuejs开发的单页应用,打包部署上线后,发现首屏启动时间达到了惊人的10s左右,于是开始优化,目前使用到的总结如下:

1003

扫描关注云+社区