iview UI Table 使用总结

表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用

场景一

场景简述

表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同的值,则表头中某一列显示不同的名字

实现

• 使用column中的renderHeaderAPI
• renderHeader自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。

<Table stripe ref="currentRowTable" :columns="columns" :data="data"></Table>

columns: [
        {
            type: 'index',
            title: '序号',
            width: 60,
            align: 'center',
        },
        {
            title: '姓名',
            key: 'name',
            align: 'center',
            render: (h, params) => {
                return h('Input', {
                    props: {
                        type: 'text',
                        value: this.data[params.index].name,
                    },
                    on: {
                        'on-blur': (event: any) => {
                            this.data[params.index].name = event.target.value;
                        },
                    },
                });
            },
        },
        {
            title: '出生年月',
            key: 'birthday',
            align: 'center',
            render: (h, params) => {
                return h('DatePicker', {
                    props: {
                        type: 'month',
                        value: this.data[params.index].birthday,
                    },
                    on: {
                        'on-change': (event) => {
                            // event 即为日期字符串值
                            this.data[params.index].birthday = event;
                        },
                    },
                });
            },
        },
        {
            title: '数量或体积',
            key: 'numbers',
            align: 'center',
            width: 120,
            // 动态根据外部type变量来替换title的名字
            renderHeader: (h: any, params: any) => {
                const title = this.formValidate.type === '' ? '数量或体积' :
                    this.formValidate.type === '0' ? '数量(枚)' :
                        '体积(L)';
                return h('span', title);
            },
            render: (h: any, params: any) => {
                return h('Input', {
                    props: {
                        type: 'text',
                        value: (this as any).data[params.index].numbers,
                    },
                    on: {
                        'on-blur': (event: any) => {
                            (this as any).data[params.index].numbers = event.target.value;
                        },
                    },
                });
            },
        },
    ],

    data: [
        {
            name: 'test',
            birthday: '1998-06',
            numbers: 0
        },
    ];

场景二

场景简述

截止到目前使用iview@3.1.2版本中,如果给Table组件添加border(是否显示纵向边框)属性时,当table暂无数据时,会出现横向滚动条.

解决方案

1. 简介粗暴的话直接去掉该属性
2. 当为表格添加纵向边框时,由于宽度为定值,导致出现滚动条,可以为表格里面的每一列设置box-sizing: border-box

场景三

场景简述

有时候会使用到内嵌表格

实现

1. 内嵌表格去掉表头 show-header Table 设置为 false
2. 使用render API

<Table :columns="columns" :data="data"></Table>

columns: [
        {
            type: 'index',
            title: '序号',
            width: 60,
            align: 'center',
        },
        {
            title: '内嵌表格',
            key: 'table',
            align: 'center',
            render: (h, params) => {
                return h('Table', {
                    props: {
                        columns: this.data[params.index].columns,
                        data: this.data[params.index].data,
                        showHeader: false // 不展示内嵌表格的表头
                    },
                });
            },
        },
    ],

    data: [
        {
            columns: [
            	{
                	title: '姓名',
                    key: 'name',
                    align: 'center',
                },
                {
                	title: '年龄',
                    key: 'age',
                    align: 'center',
                }
            ],
            data: [
            	{
                	name: 'test',
                    age: 10
                }
            ]
        },
    ];