iview,用render函数渲染

红太狼 2021-05-02 14:47 546阅读 0赞

<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)
               }

![414908-20180209144724326-1527607454.png][]

[414908-20180209144724326-1527607454.png]: /images/20210501/acf10c3cac7641d4a0405a75c1c1cc38.png