antd design 4 版本，表格操作列文字间隔小竖线

**Ant Design4 版本表格操作列文字间隔小竖线**

在 Ant Design4 版本中，我们可以使用 `Table` 组件来创建一个表格。然而，为了实现表格操作列文字间隔小竖线的效果，我们需要进行一些配置和自定义。

**基本配置**

首先，让我们看一下基本的 `Table` 配置：

jsximport React from 'react';
import { Table } from 'antd';

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
 },
 {
 title: 'Age',
 dataIndex: 'age',
 key: 'age',
 },
];

const data = [
 {
 name: 'John Brown',
 age:32,
 address: 'New York No.1 Lake Park',
 birth: '2000-01-01',
 },
 {
 name: 'Jim Green',
 age:42,
 address: 'London No.1 Lake Park',
 birth: '1999-02-02',
 },
];

function onChange(pagination, filters, sorter) {
 console.log('params', pagination, filters, sorter);
}

ReactDOM.render(
 ,
 document.getElementById('root')
);

**添加操作列**

接下来，我们需要添加一个操作列。我们可以使用 `render` 函数来自定义操作列的内容：
jsximport React from 'react';
import { Table } from 'antd';

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
 },
 {
 title: 'Age',
 dataIndex: 'age',
 key: 'age',
 },
 {
 title: 'Operation',
 render: (text, record) => (
 <div>
 <a href="#">Edit</a>
 <span className="ant-divider" />
 <a href="#">Delete</a>
 </div>
 ),
 key: 'operation',
 },
];

const data = [
 {
 name: 'John Brown',
 age:32,
 address: 'New York No.1 Lake Park',
 birth: '2000-01-01',
 },
 {
 name: 'Jim Green',
 age:42,
 address: 'London No.1 Lake Park',
 birth: '1999-02-02',
 },
];

function onChange(pagination, filters, sorter) {
 console.log('params', pagination, filters, sorter);
}

ReactDOM.render(
 <Table columns={columns}
 dataSource={data}
 onChange={onChange}
 />,
 document.getElementById('root')
);

**实现文字间隔小竖线**

为了实现文字间隔小竖线的效果，我们需要在 `render` 函数中使用 `span` 元素来创建一个小竖线：
jsximport React from 'react';
import { Table } from 'antd';

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
 },
 {
 title: 'Age',
 dataIndex: 'age',
 key: 'age',
 },
 {
 title: 'Operation',
 render: (text, record) => (
 <div>
 <a href="#">Edit</a>
 <span className="ant-divider" />
 <a href="#">Delete</a>
 </div>
 ),
 key: 'operation',
 },
];

const data = [
 {
 name: 'John Brown',
 age:32,
 address: 'New York No.1 Lake Park',
 birth: '2000-01-01',
 },
 {
 name: 'Jim Green',
 age:42,
 address: 'London No.1 Lake Park',
 birth: '1999-02-02',
 },
];

function onChange(pagination, filters, sorter) {
 console.log('params', pagination, filters, sorter);
}

ReactDOM.render(
 <Table columns={columns}
 dataSource={data}
 onChange={onChange}
 />,
 document.getElementById('root')
);

在上面的代码中，我们使用 `span` 元素来创建一个小竖线，并将其添加到操作列中。

**总结**

通过本文的内容，我们可以实现Ant Design4版本表格操作列文字间隔小竖线的效果。我们需要进行一些配置和自定义，包括添加操作列、使用`render`函数来自定义操作列的内容，并在`render`函数中使用`span`元素来创建一个小竖线。

**参考**

* Ant Design4版本文档： />* Ant Design4版本源码： 

                                上一条：操作符详解（2）
                            

                            

                                下一条：即插即用篇 | YOLOv8 引入具备跨空间学习的高效多尺度注意力 Efficient Multi-Scale Attention | 《ICASSP 2023 最新论文》
                


            相关标签：

        

            

                其他信息
            
            



                

                    

                    

                        

                            

                                
其他资源
                                



                                

                            
                        
                    
                
            
        






 
    
最新文章
    

        


                    常见的人体静电消除器的工作原理
                    LabVIEW-实现波形发生器
                    MXgraph
                    Kong简介
                    JS new Map()方法
                    进程间通信-无名管道
                    汽车网卡驱动之TJA1101B
                    如何在centos上面安装mpi4py



        
    

 







    
热门标签
    
    

        

            Python
            Linux
            Docker
            Kubernetes
            云计算
            Android
            Java
            微服务
            分布式
            集群
            MySQL
            SQLServer
            MVC
            Vue
            js
            html
            nodejs
            canvas
            机器学习
            自动化测试
            多线程
            设计模式
            Redis
            .Net
            Unity3D
            大数据
            中间件
            枚举
            消息队列
            领域驱动设计
            截取字符串
            npm
        
    




    

        
        
欢迎提供和下载各类你熟悉的实例，感谢您对"实例吧"的支持，诚心接受各类问题反馈。
        
    


    
Top

        

            
 服务条款 | 网站地图 | 友情链接 | 问题反馈
           
            

                © 2021-2024 实例吧(shili8.cn) 版权所有  备案号:粤ICP备2024310174号-1

                 粤公网安备 44011102002787号