iview渲染函数

  1 <Table border :columns="discountColumns" :data="discountData.rows"></Table>
  2  
  3      discountData: {
  4                     total: 1, rows: [
  5                         {
  6                             randomDiscountRangeMax: '',
  7                             randomDiscountRangeMin: '',
  8                             population: ''
  9                         },
 10                     ],
 11                     defaultRows:
 12                         {
 13                             randomDiscountRangeMax: '',
 14                             randomDiscountRangeMin: '',
 15                             population: ''
 16                         },
 17                 }
 18                  
 19   
 20   
 21     discountColumns: [
 22                     {
 23                         key: 'randomDiscountRange',
 24                         align: 'center',
 25                         title: '随机立减范围',
 26                         render: (h, params) => {
 27                             var me = this
 28                             return h('div', [h('Input', {
 29                                 props: {
 30                                     type: 'text',
 31                                     value: me.discountData.rows[params.index].randomDiscountRangeMin,
 32                                     disabled: this.getIsDetail(),
 33                                 },
 34                                 style: {
 35                                      '100px'
 36                                 },
 37                                 on: {
 38                                     'on-blur': (event) => {
 39                                         me.discountData.rows[params.index].randomDiscountRangeMin = event.target.value
 40                                     }
 41                                 }
 42                             }),
 43                                 h('span', '元＜=随机立减金额<'),
 44                                 h('Input', {
 45                                     props: {
 46                                         type: 'text',
 47                                         value: me.discountData.rows[params.index].randomDiscountRangeMax,
 48                                         disabled: this.getIsDetail(),
 49                                     },
 50                                     style: {
 51                                          '100px'
 52                                     },
 53                                     on: {
 54                                         'on-blur': (event) => {
 55                                             this.discountData.rows[params.index].randomDiscountRangeMax = event.target.value
 56                                         }
 57                                     }
 58                                 }),
 59                                 h('span', '元')])
 60                         }
 61                     },
 62                     {
 63                         key: 'population',
 64                         align: 'center',
 65                         title: '概率',
 66                          300,
 67                         render: (h, params) => {
 68                             var me = this
 69                             return h('div', [h('Input', {
 70                                 props: {
 71                                     type: 'text',
 72                                     value: me.discountData.rows[params.index].population,
 73                                     disabled: this.getIsDetail(),
 74                                 },
 75                                 style: {
 76                                      '100px'
 77                                 },
 78                                 on: {
 79                                     'on-blur': (event) => {
 80                                         this.discountData.rows[params.index].population = event.target.value
 81                                     }
 82                                 }
 83                             }), h('span', '%')])
 84                         }
 85                     }, {
 86                         key: 'operation',
 87                         align: 'center',
 88                         title: '操作',
 89                          200,
 90                         render: (h, params) => {
 91                             return h('div', [
 92                                 h('Button', {
 93                                     props: {
 94                                         type: 'primary',
 95                                         shape: 'circle',
 96                                         icon: 'plus',
 97                                         disabled: this.getIsDetail(),
 98                                     },
 99                                     style: {
100                                         display: params.index !== 0 ? 'none' : 'inline'
101                                     },
102                                     on: {
103                                         click: () => {
104                                             this.add('discountData')
105                                         }
106                                     }
107                                 }), h('Button', {
108                                     props: {
109                                         type: 'primary',
110                                         shape: 'circle',
111                                         icon: 'minus',
112                                         disabled: this.getIsDetail(),
113                                     },
114                                     style: {
115                                         display: params.index === 0 ? 'none' : 'inline'
116                                     },
117                                     on: {
118                                         click: () => {
119                                             this.remove(params.index, 'discountData')
120                                         }
121                                     }
122                                 })
123                             ])
124                         }
125                     }
126                 ]
127                  
128   
129  
130  add (dataName) {
131                 var obj = JSON.parse(JSON.stringify(this[dataName].defaultRows))
132                 this[dataName].rows.push(obj)
133             }
134              
135  remove (index, value) {
136                 this[value].rows.splice(index, 1)
137            }