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

相关文章

来自专栏闪电gogogo的专栏

Matplotlib

1062
来自专栏PPV课数据科学社区

[V课堂]R语言十八讲(七)

? R的画图功能是非常强大的,这非常有利于数据可视化,对于R画图,我们一 般使用三个画图系统,分别是R自带的画图系统,另外还有两个包,他们的画图功能也很强...

2686
来自专栏专注数据中心高性能网络技术研发

[Python]Matplotlib绘图基础

1.简介 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形。 ---- 2.绘图基础 2...

3217
来自专栏前端小吉米

SVG 动画精髓

1235
来自专栏Java技术栈

跟我学 Java 8 新特性之 Stream 流(三)缩减操作

和前面两篇文章一起服用,效果会更佳。通过对流API的基础体验Demo和关键知识点的讲解,相信大家对流API都有一定的认识了,但是流API强大的功能,可不仅仅像前...

694
来自专栏华章科技

纯干货:手把手教你用Python做数据可视化(附代码)

导读:制作提供信息的可视化(有时称为绘图)是数据分析中的最重要任务之一。可视化可能是探索过程的一部分,例如,帮助识别异常值或所需的数据转换,或者为建模提供一些想...

1372
来自专栏我有一个梦想

Python 项目实践二(生成数据)第一篇

上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关...

2109
来自专栏GIS讲堂

Arcgis for Js之Graphiclayer扩展详解

在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实...

1023
来自专栏帮你学MatLab

《Experiment with MATLAB》读书笔记(二)

读书笔记(二) 这是第二部分函数与绘图 将代码复制到m文件即可运行 函数部分需新建m文件保存 %% 函数 % 变量在用之前先赋0站位 % 计数或者...

2637
来自专栏一“技”之长

iOS开发CoreGraphics核心图形框架之五——Patterns模型的应用

    Patterns称为模型可能并不直观,说一个场景我们或许就可以更加容易的理解Patterns。在开发中,开发者经常会遇到这样的需求,将某个图片或者某个图...

843

扫码关注云+社区