前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iview,用render函数渲染

iview,用render函数渲染

作者头像
庞小明
发布2018-03-08 11:47:14
4.3K0
发布2018-03-08 11:47:14
举报
文章被收录于专栏:pangguomingpangguoming
<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)
           }  
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-02-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档