iview UI Table 使用总结

最新推荐文章于 2025-10-08 05:47:36 发布

原创最新推荐文章于 2025-10-08 05:47:36 发布 · 4.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #iview #table

JavaScript 同时被 2 个专栏收录

71 篇文章

订阅专栏

Vue

16 篇文章

订阅专栏

本文详细介绍了Iview UI框架中Table组件的高级应用，包括动态改变表头名称、解决带边框表格的滚动条问题及嵌套表格的实现。通过自定义列头显示、调整样式和使用渲染API，提升数据展示的灵活性与美观性。

表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对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暂无数据时,会出现横向滚动条.

解决方案

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

场景三

场景简述

有时候会使用到内嵌表格

实现

内嵌表格去掉表头 show-header Table 设置为 false
使用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
                }
            ]
        },
    ];