React+antd 如何使用Table表格

2021-08-17   阅读:1146   分类:前端    标签: React

效果展示:

1、 引入组件

import React from 'react'
import { Breadcrumb, Card, Table, Button } from 'antd';
import { render } from '@testing-library/react';

2、 编写页面

function Article() {
   const columns = [
       {
           title: '序号',
           key: 'id',
           width: 80,
           align: 'center',
           render: (txt, record, index) =>index + 1
       },
       {
           title: '标题',
           dataIndex: 'title'
       },
       {
           title: '分类',
           dataIndex: 'cate'
       },
       {
           title: '操作',
           render: (txt, record, index) =>{
               return (
                   <div>
                       <Button type="primary" size="small">编辑</Button>&nbsp;&nbsp;
                       <Button type="danger" size="small">删除</Button>
                   </div>
               )
           }
       }
   ]
   return (
       <div>
              <Button type="primary" size="middle">添加文章</Button>
              <Table columns={columns} bordered dataSource={dataSource}>
	</Table>
       </div>
   )
}
export default Article

3、 数据赋值

const dataSource = [
   {
       id: 1,
       title: 'Laravel+vue-elementUI表格分页使用例子',
       cate: '前端',

   },
   {
       id: 2,
       title: 'flutter网络编程之dio封装',
       cate: '前端',
   },
   {
       id: 3,
       title: 'flutter页面间跳转和销毁方法',
       cate: '前端',

   }
]

表格通过columns={columns} 和dataSource={dataSource},对其赋值。

【腾讯云】爆款云服务器限时体验20元起,更多上云必备产品低至1元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/783.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×