• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

AntDesignVue3 数据展示

Data: 2015-08-20 03:10:22Form: JournalClick: 0

# 数据展示

# 一、表格

参数描述类型默认值
columns表格列的配置描述arraydefault
dataSource数据数组object[]
size表格大小default、middle、smalldefault
bordered是否展示外边框和列边框booleanfalse
scroll表格是否可滚动，也可以指定滚动区域的宽、高object
loading页面是否加载中boolean、objectfalse
showHeader是否显示表头booleantrue
headerCell个性化头部单元格v-slot:headerCell="{title, column}"
bodyCell个性化单元格v-slot:bodyCell="{text, record, index, column}"
title表格标题Function(e)、v-slot:title="title"
footer表格尾部Function(e)、v-slot:footer="footer"

# 1、基础表格

<template>
    # 1、a-table 组件
    # 1.1、columns 表格列的配置描述
    # 1.2、dataSource 表格数据数组
    <a-table :dataSource="dataSource" :columns="columns"></a-table>
</template>
<script>
export default {
    setup() {
        return {
                # 2、title 列头显示文字
                # 3、dataIndex 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
                columns: [
                    {
                        title: "ID",
                        dataIndex: "id",
                    },
                    {
                        title: "账号",
                        dataIndex: "account"
                    },
                    {
                        title: "姓名",
                        dataIndex: "name"
                    },
                    {
                        title: "QQ号",
                        dataIndex: "qq"
                    },
                    {
                        title: "性别",
                        dataIndex: "sex"
                    },
                    {
                        title: "介绍",
                        dataIndex: "info"
                    }
                ],
                dataSource: [
                    {
                        id: "1",
                        account: "ouyangke",
                        name: "欧阳克",
                        qq: 428188207,
                        sex: "男",
                        info: "PHP中文网实战项目组长/专业讲师，擅长WEB项目前后端全栈开发,10年PHP开发经验,曾开发过多个CMS/CRM系统,并负责PHP中文网在线直播系统与学员中心开发!擅长: Vue/Node/PHP/ThinkPHP/Laravel/小程序等项目开发与教学!",
                    },
                    {
                        id: "2",
                        account: "zhutianpeng",
                        name: "朱天蓬",
                        qq: 498668472,
                        sex: "男",
                        info: "PHP中文网教学总监/首席讲师教学幽默风趣，讲解由浅入深，具有10多年教学经验，让学员“听得懂，学得会，用得上”是我的至高目标！擅长：ES6/Node/Vue/PHP/ThinkPHP/Laravel开发与教学!",
                    },
                    {
                        id: "3",
                        account: "meijue",
                        name: "灭绝师太",
                        qq: 952637517,
                        sex: "女",
                        info: "PHP中文网全栈课程组长/专业讲师8年WEB开发经验,PHP中文网多套畅销课程的作者,既有女老师的耐心,又有男老师的坚毅,深受学员的喜爱,特别是开发新人!擅长: Vue/PHP/ThinkPHP/Laravel/Uni-APP/小程序开发与教学",
                    }
                ]
            };
    }
};
</script>

# 2、Table 属性

<template>
    # 1、size 表格大小：default(大) middle(中) small(小)
    <a-table :dataSource="dataSource" :columns="columns" size="small"></a-table>
    # 2、bordered 展示外边框和列边框
    <a-table :dataSource="dataSource" :columns="columns" bordered></a-table>
    
    # 3、scroll 表格是否可滚动，也可以指定滚动区域的宽、高
    # 3.1、x 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'
    # 3.2、y 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值
    <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 2000, y: 100 }"></a-table>
      
    # 4、loading 页面是否加载中
    <a-table :dataSource="dataSource" :columns="columns" loading></a-table>
      
    # 5、showHeader 是否显示表头
    <a-table :dataSource="dataSource" :columns="columns" :showHeader="showHeader"></a-table>
    
    # ----------以下都是用vue3组件插槽----------
    
    <a-table :dataSource="dataSource" :columns="columns">
        # 6、headerCell 个性化头部单元格：v-slot:headerCell="{title, column}"
        <template #headerCell="{ title, column }">
            {{ title }}

            {{ column }}
        </template>
         
        # 7、bodyCell 个性化单元格：v-slot:bodyCell="{text, record, index, column}"
        <template #bodyCell="{ text, record, index, column }">
            {{ text }}
            {{ record }}
            {{ column }}}
            {{ index }}
        </template>
        
        # 8、title 表格标题
        <template #title>用户组列表</template>
        
        # 9、footer 表格尾部
        <template #footer>总人数</template>
    </a-table>
</template>

# 3、columns 配置

参数描述类型默认值
title列头显示文字string
dataIndex列数据在数据项中对应的路径，支持通过数组查询嵌套路径string、string[]
align设置列的对齐方式left、right、centerleft
fixed列是否固定，可选 true(等效于 left) 'left' 'right'boolean、stringfalse
size表格大小default、middle、smalldefault
keyVue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性stringfalse
width列宽度string、number
loading页面是否加载中boolean、objectfalse
showHeader是否显示表头booleantrue
ellipsis超过宽度将自动省略，暂不支持和排序筛选一起使用booleanfalse
<template>
    <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 2000 }"></a-table>
</template>
<script>
export default {
    setup() {
        return {
            # 1、align 设置列的对齐方式：left right center
            # 2、fixed 把选择框列固定在左边：true(默认左)，left(左)，right(右)
            # 3、key Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性
            # 4、width 列宽度
            # 5、ellipsis 让单元格内容根据宽度自动省略，用...代替
            columns: [
                {
                    title: "ID",
                    dataIndex: "id",
                    fixed: true,
                    align: 'center',
                    key : "id",
                    width: '100px',
                },
                {
                    title: "账号",
                    dataIndex: "account",
                },
                {
                    title: "姓名",
                    dataIndex: "name"
                },
                {
                    title: "QQ号",
                    dataIndex: "qq"
                },
                {
                    title: "性别",
                    dataIndex: "sex"
                },
                {
                    title: "介绍",
                    dataIndex: "info",
                    fixed: 'right',
                    ellipsis: true
                }
            ]
            };
    },
};
</script>

# 4、pagination 分页器

参数描述类型默认值
position指定分页显示的位置， 取值为topLeft、topCenter、topRight、bottomLeft、 bottomCenter、bottomRightArray[bottomRight]
total数据总数number0
current(v-model)当前页数number
pageSize(v-model)每页条数number
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
pageSizeOptions指定每页可以显示多少条string[]['10', '20', '30', '40']
size当为「small」时，是小尺寸分页string
disabled禁用分页boolean
<template>
    # 2、pagination 分页的配置项
    # 2.1、position 指定分页显示的位置， 取值为topLeft、topCenter、topRight、bottomLeft、bottomCenter、bottomRight
    # 2.2、更多配置项，查看(Pagination)翻页样式
    # 2.2.1、pageSize 每页数量
    # 2.2.2、total 总数量，跟(dataSource)的数量冲突
    # 2.2.3、size 翻页按钮大小 small
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="{position: ['topCenter'],pageSize: 10,disabled:true,size:'small'}"
    />
</template>
<script>
export default {
    setup() {
        const columns = [
            {
                title: "ID",
                dataIndex: "id"
            },
            {
                title: "账号",
                dataIndex: "account"
            },
            {
                title: "姓名",
                dataIndex: "name"
            },
            {
                title: "介绍",
                dataIndex: "info"
            }
        ];
        # 1、创建100条数据
        # 1.1、_ 变量占位符
        # 1.2、map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
        const dataSource = [...Array(100)].map((_, i) => ({
            id: i,
            account: `jiangshi${i}`,
            name: `讲师${i}`,
            info: `php中文网讲师，编号： ${i}`
        }));
        return {
            columns,
            dataSource
        }
    }
};
</script>

# 5、rowSelection 选择功能

参数描述类型默认值
type多选/单选，checkbox or radiostringcheckbox
dataSource数据数组object[]
columnWidth自定义列表选择框宽度string、number
columnTitle自定义列表选择框标题string、VNode
selections自定义选择项 配置项, 设为 true 时使用默认选择项object[]、booleantrue
fixed把选择框列固定在左边booleantrue
<template>
    # 1、type 类型：checkbox(多选)、radio(单选)
    # 2、dataSource 里必须要有key
    # 3、columnWidth 自定义列表选择框宽度
    # 4、columnTitle 自定义列表选择框标题
    # 5、selections 自定义选择项 配置项, 设为 true 时使用默认选择项
    # 6、fixed 把选择框列固定在左边
    <a-table
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{ x: 2000 }"
        :rowSelection="{
            type: 'checkbox',
            columnWidth: 200,
            columnTitle: '标题',
            selections: true,
            fixed: true
        }"
    />
</template>
<script>
export default {
    setup() {
        const columns = [
            {
                title: "ID",
                dataIndex: "id"
            },
            {
                title: "账号",
                dataIndex: "account"
            },
            {
                title: "姓名",
                dataIndex: "name"
            },
            {
                title: "介绍",
                dataIndex: "info"
            }
        ];
        const dataSource = [...Array(100)].map((_, i) => ({
            key: i,
            id: i,
            account: `jiangshi${i}`,
            name: `讲师${i}`,
            info: `php中文网讲师，编号： ${i}`
        }));
        return {
            columns,
            dataSource
        }
    }
};
</script>
事件名称描述回调参数
change选中项发生变化时的回调Function(selectedRowKeys, selectedRows)
<template>
    <a-table
        :columns="columns"
        :dataSource="dataSource"
        :rowSelection="rowSelection"
    />
</template>
<script>
    export default {
        setup() {
            const columns = [
                {
                    title: "ID",
                    dataIndex: "id"
                },
                {
                    title: "账号",
                    dataIndex: "account"
                },
                {
                    title: "姓名",
                    dataIndex: "name"
                },
                {
                    title: "介绍",
                    dataIndex: "info"
                }
            ];
            const dataSource = [...Array(100)].map((_, i) => ({
                key: i,
                id: i,
                account: `jiangshi${i}`,
                name: `讲师${i}`,
                info: `php中文网讲师，编号： ${i}`
            }));
            const rowSelection = {
                onChange(selectedRowKeys, selectedRows) {
                    console.log(selectedRowKeys, selectedRows);
                }
            };
            return {
                columns,
                dataSource,
                rowSelection,
            };
        }
    };
</script>
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>