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

  • 相关阅读:
    mingW与cygwin
    Ruby on Rails 和 J2EE:两者能否共存?
    嵌入式Linux学习笔记(一) 启航、计划和内核模块初步体验
    嵌入式Linux学习笔记(六) 上位机QT界面实现和通讯实现
    嵌入式Linux问题总结(一) Ubuntu常用命令和编译问题解决方法
    嵌入式Linux学习笔记(五) 通讯协议制定和下位机代码实现
    嵌入式Linux学习笔记(四) 设备树和UART驱动开发
    嵌入式Linux学习笔记(三) 字符型设备驱动--LED的驱动开发
    嵌入式Linux学习笔记(二) 交叉编译环境和Linux系统编译、下载
    记录嵌入式面试的流程
  • 原文地址:https://www.cnblogs.com/yun1108/p/9505325.html
Copyright © 2020-2023  润新知