在View UI中，表格组件Table是一个常用组件，表格组件重要的元素是列columns,如果仅仅是单调的纯文本功能展示，那么在使用组件时，在columns中定义好映射就算完成了。但是我们大部分需求并没有那么简单。

我们可能会遇到如下需求：

  • 某一列渲染一个可点击的链接
  • 某一列渲染一个可以放大的图片
  • 某一列渲染一个可操作的按钮
  • 某一列渲染一个好看的头像
  • 某一列渲染标签

以上种种操作就需要配合单元格（也称作为columns数据的项）的渲染函数render，自定义渲染当前列，包括

  • 渲染自定义组件
  • 原生的html标签
  • View UI组件

render 函数传入两个参数：

  • 第一个是 h
  • 第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

下面就以上面几个需求为例介绍render的用法：

{
    title: '',
    key: '',
    render: (h: any, params: any) => {
        return h('元素', {元素性质}/[元素性质],"元素内容"/[元素内容]),
    }
}

1.渲染可点击的链接

{
    title: '直播地址',
    width: 100,
    key: 'liveUrl',
    render: (h: any, params: any) => {
        return h(
            'a',
            {
                attrs: {
                    href: params.row.liveUrl,
                    target: '_blank',
                },
            },
            '直播地址'
        )
    }

2.渲染可操作的按钮

这里按钮是用的View UI的按钮Button组件，所以这里的使用范畴就是渲染组件。

{
    title: '操作',
    key: 'Actions',
    width: 150,
    render: (h: any, params: any) => {
        return h('div', [
            h(
                'Button',
                {
                    props: {
                        type: 'primary',
                        size: 'small',
                    },
                    style: {
                        marginRight: '5px',
                    },
                    on: {
                        click: () => {
                            //按钮点击事件
                        },
                    },
                },
                '编辑'
            ),
            h(
                'Button',
                {
                    props: {
                        type: 'error',
                        size: 'small',
                    },
                    on: {
                        click: async () => {
                            //弹出模态框
                            this.$Modal.confirm({
                                title: '提示',
                                content: '删除确认',
                                okText: '确认',
                                cancelText: '取消',
                                onOk: async () => {
                                    //点击确认后 作的操作
                                },
                            })
                        },
                    },
                },
                '删除'
            ),
        ])
    },
}

3.渲染可放大的图片

这里需要View UI的模态框Modal组件的配合。

  qrCodeShow: boolean = false
  qrCodeUrl: string = ''
//...
{
      title: this.L('直播二维码'),
      width: 120,
      align: 'center',
      key: 'qrCode',
      render: (h, params) => {
        return h('div', [
          h('img', {
            style: {
              width: '45px',
              height: '45px',
              verticalAlign: 'middle',
              marginTop: '3px',
              marginBottom: '3px',
            },
            attrs: {
              src: params.row.qrCode,
            },
            on: {
              click: (e) => {
                //点击预览图片
                this.handleView(e.srcElement.currentSrc)
              },
            },
          }),
        ])
      },
    },
//...
  handleView(url) {
    this.qrCodeUrl = url
    this.qrCodeShow = true
  }

    <Modal v-model="qrCodeShow"
           title="展品二维码">
      <img :src="qrCodeUrl"
           v-if="qrCodeShow"
           style="width:100%;height:100%">
      <!--取消对话框默认按钮-->
      <div slot="footer"></div>
    </Modal>

4.渲染头像

网站后台管理界面，经常会用用户管理的功能，所以对用户的头像渲染也成了刚需。

render: (h: any, params: any) => {
    return h('div', [
        //头像
        h('Avatar', {
            props: {
                shape: 'square',
                src:
                params.row.head == null
                ? require('../../images/usericon.jpg')
                : params.row.head,
            },
        }),
        //用户名
        h(
            'span',
            {
                style: {
                    'margin-left': '8px',
                    'margin-right': '10px',
                },
            },
            params.row.username
        )
    ])
},

5.渲染标签

单调的状态，提示，通过标签让界面看起来更生动，ps:这里依然用到了View UI的标签Tag组件。

{
    title: '状态',
    width: 120,
    key: 'status',
    render: (h: any, params: any) => {
        return h(
            'Tag',
            {
                props: {
                    color:
                    params.row.status == 1
                    ? 'success'
                    : params.row.status == 2
                    ? 'default'
                    : 'error',
                },
            },
            //获取状态名称
            this.getCodeText('EnumAuditStatus', params.row.status)
        )
    },
},