react使用Antd表格

不念不忘少年蓝@ 2022-01-22 09:57 476阅读 0赞

# react使用Antd表格 #

### 1.表格中插入图标或者选择框 ###

需要用到columns中的render回调

columns: [
            {  title: '姓名', dataIndex: 'name', key: 'name', align: "center" },
            {  title: '头像', dataIndex: 'img', key: 'img', align: "center" ,render: (record) => 
            <img src={ record} width="100px" height="100px" style={ { borderRadius:"50%"}} alt=""/>},
            {  title: '性别', dataIndex: 'sex', key: 'sex', align: "center" ,render:(record)=>{ 
              return record?"男":"女"
            }},
            {  title: '登录状态', dataIndex: 'online', key: 'online', align: "center",render: (record) => 
            <Switch checked={ record} />},
            {  title: '手机号', dataIndex: 'phone', key: 'phone', align: "center" },
            {  title: '地址', dataIndex: 'address', key: 'address', align: "center" },
            { 
              title: '操作',
              dataIndex: '',
              key: 'x',
              align: "center",
              render: () => <Button>删除</Button>,
            },
    ],

### 2.表格中分页配置 ###

let pagination={ 
      total:50,
      showSizeChanger:true,//是否可以改变pageSize
      showQuickJumper:true//是否可以快速跳转到某页
    }

<Table { ...this.props} rowSelection={ rowSelection} pagination={ pagination} />

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 react antd table表格点击一行选中数据的方法

一、前言 ![在这里插入图片描述][61b7c3e2bb3a44cea4db23f61fc29c5e.png] antd的table，默认是点击左边的单选/复选按钮，才

迈不过友情╰/ 2024年03月01日 08:26/ 0 赞/ 83 阅读

相关 REACT_react使用antd-mobile UI框架

安装 > npm install antd-mobile --save public/index.html <script src="https://as.ali

怼烎@/ 2022年10月11日 01:08/ 0 赞/ 241 阅读

相关 ES5中引入antd表格的使用

/ 人员列表 / var React = require('react'); import { connect} from 'react-re

- 日理万妓/ 2022年07月12日 16:46/ 0 赞/ 184 阅读

相关 React 项目记录（三）——在 React 中使用 antd

Step 1：安装antd npm i --save antd Step 2：引入文件在需要使用到 antd 的页面顶部加上 import {

川长思鸟来/ 2022年03月25日 10:16/ 0 赞/ 368 阅读

相关 react➕antd中使用switch...case...

1，使用switch...case...效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

墨蓝/ 2022年02月05日 10:34/ 0 赞/ 965 阅读

相关 react中使用AntD表单

react中使用AntD表单 1.双向数据绑定 render() { const { getFieldDecorator } = thi

àì夳堔傛蜴生んèń/ 2022年01月25日 18:13/ 0 赞/ 471 阅读

相关 react使用Antd表格

react使用Antd表格 1.表格中插入图标或者选择框需要用到columns中的render回调 columns: [ {

不念不忘少年蓝@/ 2022年01月22日 09:57/ 0 赞/ 477 阅读

相关 react中antd+css Module一起使用

antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。使用 exclude 和 inclu

冷不防/ 2021年12月21日 04:13/ 0 赞/ 296 阅读

相关 react使用antd mobile

Ant-design框架 1. create-react-app antd 2. npm install antd-mobile --

向右看齐/ 2021年07月25日 13:29/ 0 赞/ 515 阅读

相关 react 配置antd

1、安装 cnpm install antd -D cnpm install -D craco-less 2、在根目录与src同级

小咪咪/ 2021年07月24日 11:55/ 0 赞/ 473 阅读