• 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: {
                                         '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: {
                                             '100px'
                                        },
                                        on: {
                                            'on-blur': (event) => {
                                                this.discountData.rows[params.index].randomDiscountRangeMax = event.target.value
                                            }
                                        }
                                    }),
                                    h('span', '元')])
                            }
                        },
                        {
                            key: 'population',
                            align: 'center',
                            title: '概率',
                             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: {
                                         '100px'
                                    },
                                    on: {
                                        'on-blur': (event) => {
                                            this.discountData.rows[params.index].population = event.target.value
                                        }
                                    }
                                }), h('span', '%')])
                            }
                        }, {
                            key: 'operation',
                            align: 'center',
                            title: '操作',
                             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)
               }  
    

     

  • 相关阅读:
    WM_COMMAND 和 WM_NOTIFY 的区别
    C 游戏所要看的书
    Source Insight中文字体设置
    在 windows7 中使用 vs2003 时,“在文件中查找”导致无响应的问题
    解决VS2008 调试启动特别慢
    c++ 浅谈 new 的使用
    Access界面基础操作
    与孩子一起学编程12章
    YT工作日志-0911
    两种方式遍历二叉树--递归方式和非递归方式
  • 原文地址:https://www.cnblogs.com/itrena/p/8830951.html
Copyright © 2020-2023  润新知