AntV使用（Table表格组件）

uuai

已于 2022-11-09 14:31:51 修改

阅读量939

点赞数

分类专栏： antdv vue 文章标签： javascript vue.js

于 2022-11-09 14:16:18 首次发布

本文链接：https://blog.csdn.net/qq_39019768/article/details/127768387

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

antdv

4 篇文章 0 订阅

订阅专栏

本文探讨了在Ant Design中使用Table组件时遇到的滚动条和固定列高度设置的问题，包括`scrolly轴`固定高度的不同情况分析，如`max-content`、`true`和具体数值时表格的表现。通过代码示例展示了如何配置宽度、`fixed`属性以及`scopedSlots`来解决操作栏空白列和布局错位的问题。

摘要由CSDN通过智能技术生成

使用Table表格设置固定高度问题

scroll y 轴固定高度 x : max-content
1. 操作栏设置宽度和 fixed: ‘right’, Y 轴滚动条会在外部
2. 操作栏设置 fixed: ‘right’, 不设置宽度会多出空白列
3. 操作栏不设置fixed ,不设置宽度正常

scroll y 轴固定高度 x : true
不能设置true 表格位置错位，空白列

scroll y 轴固定高度 x : 1000 (设置固定宽度)
** 父级设置宽度
表格正常，xy都有滚动条

滚动条会在外部

<template>
        <div style=" box-sizing: border-box;padding: 30px;">
            <a-table  bordered :scroll="{ y: 'calc(100vh - 180px)',x:true }" :columns="columns" :data-source="data" :pagination="ipagination"
             >
            <a slot="action" slot-scope="text">
                <a-button>删除</a-button>
            </a>
        </a-table>
</template>
<script>

const columns = [
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
            ellipsis: true,
        },
        {
            title: 'age',
            dataIndex: 'age',
            key: 'age',
            ellipsis: true,
        },
        {
            title: 'name',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
        },
        {
            title: 'checked',
            dataIndex: 'checked',
            key: 'checked',
            ellipsis: true,
        },

        {
            title: 'tags',
            dataIndex: 'tags',
            key: 'tags',
            ellipsis: true,
        },

        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            // fixed: 'right',
            // width:200,
            scopedSlots: { customRender: 'action' }
        },
    ];
    const data = [];
    for (let i = 0; i < 100; i++) {
        data.push({
            key: i,
            title:i,
            name: `Edward King ${i}`,
            age: i,
            checked:i/2===0?'true':'false',
            address: `London, Park Lane no. London, Park Lane noLondon, Park Lane noLondon, Park Lane noLondon, Park Lane no${i}`,
        });
    }
 export default{
    data(){
         return {
                data,
                columns,
                selectedRowKeys: [],
                ipagination: {
                    current: 1,
                    pageSize: 20,
                    pageSizeOptions: ['3', '10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + '-' + range[1] + ' 共' + total + '条'
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total:100
                },
            }
    }
} 
</script>