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

骑猪看日落 2022-02-19 02:34 646阅读 0赞

一、统一样式

<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'
                  }
                }), '删除'])
              ])
            ])
          }]

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

普通的格式化，根据值显示不同的内容

{
              title: '项目类型',
              key: 'type',
              minWidth: 80,
              align: 'center',
              render: (h, params) => h('span', this.projectType(params.row.type))
            }
    
    methods: {
          projectType(val) {
            if (val === 1) {
              return '数据采集'
            } else if (val === 2) {
              return '数据生产'
            } else if (val === 3) {
              return '综合项目'
            } else if (val === 4) {
              return '外包项目'
            } else {
              return '其他类型'
            }
          },
    }