AntV使用(Table表格组件 )

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都有滚动条

  1. 滚动条会在外部
    在这里插入图片描述
<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值