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 width: '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 width: '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 width: 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 width: '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 width: 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 }
默默搬砖中 ——假装自己是小白