iview的table表格中使用render函数进行单元格格式化

一、统一样式 

<i-table size="large" :columns="columns1" :data="data1"></i-table>
columns: [
    {
          title: '项目类型',
          key: 'type',
          minWidth: 80,
          render: (h, params) => h('i-button', {
            props: {
              type: 'primary',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            }
          }, this.projectType(params.row.status))
    }
]

methods: {
      projectType(val) {
        if (val === 1) {
          return '数据采集'
        } else if (val === 2) {
          return '数据生产'
        } else if (val === 3) {
          return '综合项目'
        } else if (val === 4) {
          return '外包项目'
        } else {
          return '其他'
        }
      }
}

主要是用到render函数，调用projectType方法进行数据判断处理，其中的param和row是固定写死的，status是对象中的属性值也是row中的属性值

二、显示不同则样式不同

<i-table size="large" :columns="columns1" :data="data1"></i-table>
{
        title: '状态',
        key: 'status',
        minWidth: 120,
        render: (h, params) => {
          switch (params.row.status) {
            case 1:
              return h('div', [
                h('Button', {
                  props: {
                    type: 'default',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  }
                }, '禁用')
              ])
            default:
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  }
                }, '正常')
              ])
          }
        }
      }

或者

{
        title: '操作',
        key: 'operation',
        align: 'center',
        minWidth: 150,
        render: (h, params) => h('div', [
          h('a', {
            style: {
              marginRight: '16px'
            },
            on: {
              click: () => this.handleEdit(params.row)
            }
          }, [h('Icon', {
            props: {
              type: 'edit',
              size: 16
            },
            style: {
              marginRight: '4px'
            }
          }), '编辑']),
          h('Poptip', {
            props: {
              confirm: true,
              transfer: true,
              title: '你确定要删除当前数据?',
              'ok-text': '是',
              'cancel-text': '否'
            },
            on: {
              'on-ok': () => this.handleDelete(params.row)
            }
          }, [
            h('a', {
              style: {
                marginRight: '16px',
                display: this.$Utils.butPerm.isShow('user:list:delete') ? 'inline-block' : 'none'
              }
            }, [h('Icon', {
              props: {
                type: 'trash-a',
                size: 16
              },
              style: {
                marginRight: '4px'
              }
            }), '删除'])
          ])
        ])
      }]

 里面的方法都是自定义方法，就不粘贴了