React全家桶+共享单车实战开发-——7 AntD Table 基础表格

最新推荐文章于 2023-02-15 10:30:14 发布
最新推荐文章于 2023-02-15 10:30:14 发布
阅读量480 收藏 1
点赞数
分类专栏： 前端技术 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wgf5845201314/article/details/100082243
版权

可参考：https://blog.csdn.net/qq_34235864/article/details/86580869

 一、基础表格

  • Table组件基础Api
  1. bordered属性：是否展示外边框和列边框
  2. columns属性：表格列的配置描述（即表头）
  3. dataSource属性：数据数组
  4. pagination属性：分页器，设为 false 时不展示和进行分页

  src->pages->table->basicTable.js

import React from 'react';
import {Card, Table} from 'antd';

export default class BasicTable extends React.Component{
    state={}
    componentDidMount(){
        const data = [
           {
                id:'0',
                userName:'Jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Tom',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Lily',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'08:00'
           },
        ]
        this.setState({
            dataSource:data
        })
    }
    render(){
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },{
                title:'用户名',
                dataIndex:'userName'
            },{
                title:'性别',
                dataIndex:'sex'
            },{
                title:'状态',
                dataIndex:'state'
            },{
                title:'爱好',
                dataIndex:'interest'
            },{
                title:'生日',
                dataIndex:'birthday'
            },{
                title:'地址',
                dataIndex:'address'
            },{
                title:'早起时间',
                dataIndex:'time'
            }
        ]
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
            </div>
        );
    }
}

二、项目工程化----Table 动态渲染

  • 项目工程化---Mock数据
  • 项目工程化---Axios封装
  • 项目工程化---Loading 处理、错误拦截(动态添加key值)

Easy Mock用法及Mock.js规范 

1、获取mock数据

src->pages->table->basicTable.js

import React from 'react';
import {Card, Table} from 'antd';
import axios from 'axios'
export default class BasicTable extends React.Component{
    state={
        dataSource2:[]
    }
    componentDidMount(){
        const data = [
           {
                id:'0',
                userName:'Jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Tom',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Lily',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'08:00'
           },
        ]
        this.setState({
            dataSource:data
        })
        this.request();
    }

    //动态获取mock数据
    request = ()=>{
        let baseUrl = 'https://www.easy-mock.com/mock/5d6499edd61d1455304561c4/mockapi'
        axios.get(baseUrl+'/table/list').then((res)=>{
            if(res.status=='200' && res.data.code== 0){
                this.setState({
                        dataSource2:res.data.result
                })
            }
        })
    }



    render(){
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },{
                title:'用户名',
                dataIndex:'userName'
            },{
                title:'性别',
                dataIndex:'sex'
            },{
                title:'状态',
                dataIndex:'state'
            },{
                title:'爱好',
                dataIndex:'interest'
            },{
                title:'生日',
                dataIndex:'birthday'
            },{
                title:'地址',
                dataIndex:'address'
            },{
                title:'早起时间',
                dataIndex:'time'
            }
        ]
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="动态数据渲染" style={{margin:'10px 0'}}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
            </div>
        );
    }
}

2、封装Axios   获取mock数据

src->axios->index.js：定义ajax方法，封装axios异步获取Easy Mock项目虚拟数据的过程【项目工程化】

import JsonP from 'jsonp'
import axios from 'axios'
import {Modal} from 'antd'

export default class Axios{
     static jsonp(options){
         return new Promise((resolve, reject) => {
             JsonP(options.url,{
                 param:'callback'
             }, function (err, response) {
                if(response.status === 'success'){
                    resolve(response);
                }else{
                    reject(response.message);
                }
             })
         })
     }

     static ajax(options){
         let baseApi = 'https://www.easy-mock.com/mock/5d6499edd61d1455304561c4/mockapi'
         return new Promise((resolve,reject)=>{
             axios({
                 url: options.url,
                 method:'get',
                 baseURL:baseApi,
                 timeout:5000,
                 params: (options.data && options.data.params) || ''
             }).then((response)=>{
                 if(response.status == '200'){
                    let res = response.data;
                    if(res.code =='0'){
                        resolve(res);
                    }else{
                        Modal.info({
                            title:"提示",
                            content:res.msg
                        })
                    }
                 }else{
                     reject(response.data);
                 }
             })
         })
     }
}　　

src->pages->table->basicTable.js    

定义request方法，调用axios动态获取Mock数据

import React from 'react';
import {Card, Table} from 'antd';
import axios from './../../axios/index'

export default class BasicTable extends React.Component{
    state={
        dataSource2:[]
    }
    componentDidMount(){
        const data = [
           {
                id:'0',
                userName:'Jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Tom',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Lily',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'08:00'
           },
        ]
        this.setState({
            dataSource:data
        })
        this.request();
    }

    //动态获取mock数据
    request = ()=>{
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:1
                }
            }
        }).then((res)=>{
            if(res.code == '0'){
                this.setState({
                    dataSource2:res.result
                })
            }
        })
    }



    render(){
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },{
                title:'用户名',
                dataIndex:'userName'
            },{
                title:'性别',
                dataIndex:'sex'
            },{
                title:'状态',
                dataIndex:'state'
            },{
                title:'爱好',
                dataIndex:'interest'
            },{
                title:'生日',
                dataIndex:'birthday'
            },{
                title:'地址',
                dataIndex:'address'
            },{
                title:'早起时间',
                dataIndex:'time'
            }
        ]
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="动态数据渲染" style={{margin:'10px 0'}}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
            </div>
        );
    }
}

3、Loading 处理、错误拦截

  • public-->index.html   root后面增加如下代码
    <div id="root"></div>
    <div class="ajax-loading" id="ajaxLoading" style="display: none;">
        <div class="overlay"></div>
        <div class="loading">
            <img src="https://media.number-7.cn/ebike-h5/static/images/common/loading.gif" alt="">
            <span>加载中，请稍后...</span>
        </div>
     </div>
  • style-->loading.less
/** load **/
.ajax-loading{
    display: none;
    .loading{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding:0 40px;
      height: 80px;
      line-height: 80px;
      background: rgba(0, 0, 0, 0.75);
      border-radius: 6px;
      text-align: center;
      z-index: 9999;
      font-size:@fontD;
      color:#fff;
      img{
        width: 32px;
        vertical-align: middle;
      }
      span{
        margin-left:12px;
      }
    }
    .overlay{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 9998;
      background: rgb(255, 255, 255);
      opacity: 0.1;
    }
  }
  
  /****/

style-->common.less引入loading.less

@import './loading.less';

axios-->index.js   修改如下：

     static ajax(options){
         let loading;
         if(options.data && options.data.isShowLoading !== false){
             loading = document.getElementById('ajaxLoading')
             loading.style.display = 'block';
         }
         let baseApi = 'https://www.easy-mock.com/mock/5d6499edd61d1455304561c4/mockapi'
         return new Promise((resolve,reject)=>{
             axios({
                 url: options.url,
                 method:'get',
                 baseURL:baseApi,
                 timeout:5000,
                 params: (options.data && options.data.params) || ''
             }).then((response)=>{
                if(options.data && options.data.isShowLoading !== false){
                    loading = document.getElementById('ajaxLoading')
                    loading.style.display = 'none';
                }
                 if(response.status == '200'){
                    let res = response.data;
                    if(res.code =='0'){
                        resolve(res);
                    }else{
                        Modal.info({
                            title:"提示",
                            content:res.msg
                        })
                    }
                 }else{
                     reject(response.data);
                 }
             })
         })
     }
  • src-->pages-->table-->basicTable.js  中
    //动态获取mock数据
    request = ()=>{
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:1
                },
                isShowLoading:false
            }
        }).then((res)=>{
            if(res.code == '0'){
                this.setState({
                    dataSource2:res.result
                })
            }
        })
    }

此时不显示Loading加载

isShowLoading默认为true时：

4、表格字段映射，如将性别、状态、爱好的值转为汉字

        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },{
                title:'用户名',
                dataIndex:'userName'
            },{
                title:'性别',
                dataIndex:'sex',
                render(sex){
                    return sex ==1 ?'男':'女'
                }
            },{
                title:'状态',
                dataIndex:'state',
                render(state){
                    let config = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },{
                title:'爱好',
                dataIndex:'interest',
                render(interest){
                    let config = {
                        '1':'游泳',
                        '2':'打篮球',
                        '3':'踢足球',
                        '4':'跑步',
                        '5':'爬山',
                        '6':'骑行',
                        '7':'桌球',
                        '8':'麦霸'
                    }
                    return config[interest];
                }
            },{
                title:'生日',
                dataIndex:'birthday'
            },{
                title:'地址',
                dataIndex:'address'
            },{
                title:'早起时间',
                dataIndex:'time'
            }
        ]

 

三、表格单选

  • rowSelection属性：列表项是否可选择，对象
  • 配置项：
  1. type：单选/多选
  2. selectedRowKeys：指定选中项的key数组，需要和onChange进行配合（单选，仅onRow事件即可）
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
      type: 'radio',
      selectedRowKeys
}
  • onRow事件：控制点击某一行，设置行属性
 <Card title="Mock-单选" style={{margin: '10px 0'}}>
      <Table 
            bordered
            rowSelection={rowSelection}
            onRow={(record, index) => {
                  return {
                       onClick: () => { 
                            this.onRowClick(record, index)
                       }  //点击行
                  }
            }}
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
      />
</Card>
  • 提取出onRowClick方法：获取当前点击行的数据项record和索引index
//点击某一行 record:当前点击行的数据项 index:当前点击行的索引
onRowClick = (record, index) => {
        let selectKey = [index];
        Modal.info({
            title: '信息',
            content: `用户名：${record.userName},用户爱好：${record.interest}`
        });
        this.setState({
            selectedRowKeys: selectKey,
            selectedItem: record
        })
}

此时basicTable.js全部代码如下：

import React from 'react';
import {Card, Table, Modal} from 'antd';
import axios from './../../axios/index'

export default class BasicTable extends React.Component{
    state={
        dataSource2:[]
    }
    componentDidMount(){
        const data = [
           {
                id:'0',
                userName:'Jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Tom',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
           },{
                id:'1',
                userName:'Lily',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2010-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'08:00'
           },
        ]
        data.map((item,index)=>{
            item.key = index;
        })
        this.setState({
            dataSource:data
        })
        this.request();
    }

    //动态获取mock数据
    request = ()=>{
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:1
                },
                isShowLoading:true
            }
        }).then((res)=>{
            if(res.code == '0'){
                res.result.map((item,index)=>{
                    item.key = index;
                })
                this.setState({
                    dataSource2:res.result
                })
            }
        })
    }

    onRowClick = (record, index)=>{
        let selectKey = [index];
        Modal.info({
            title:'信息',
            content:`用户名：${record.userName}, 用户爱好：${record.interest}`
        })
        this.setState({ 
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    }

    render(){
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },{
                title:'用户名',
                dataIndex:'userName'
            },{
                title:'性别',
                dataIndex:'sex',
                render(sex){
                    return sex ==1 ?'男':'女'
                }
            },{
                title:'状态',
                dataIndex:'state',
                render(state){
                    let config = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },{
                title:'爱好',
                dataIndex:'interest',
                render(interest){
                    let config = {
                        '1':'游泳',
                        '2':'打篮球',
                        '3':'踢足球',
                        '4':'跑步',
                        '5':'爬山',
                        '6':'骑行',
                        '7':'桌球',
                        '8':'麦霸'
                    }
                    return config[interest];
                }
            },{
                title:'生日',
                dataIndex:'birthday'
            },{
                title:'地址',
                dataIndex:'address'
            },{
                title:'早起时间',
                dataIndex:'time'
            }
        ]

        // const { selectedRowKeys } = this.state;
        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type:'radio',
            selectedRowKeys
        }
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="动态数据渲染-Mock" style={{margin:'10px 0'}}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-单选" style={{margin:'10px 0'}}>
                    <Table
                        bordered
                        rowSelection={rowSelection}
                        onRow={(record,index)=>{
                            return {
                                onClick:()=>{
                                    this.onRowClick(record,index);
                                },//点击行
                            }
                        }}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
            </div>
        );
    }
}

四、表格复选

  • 配置rowSelection属性对象
  1. 添加onChange事件
  2. selectedRowKeys：当前选中的行索引
  3. selectedRows：当前选中的行对象
const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                // let ids = []
                // selectedRows.map((item) => {
                //    ids.push(item.id)
                // })
                this.setState({
                    selectedRowKeys, //必需
                    // selectedIds: ids,
                    selectedRows
                })
            }
}

 

  • 选中多行执行操作

  1. 获取state中的seletedRows对象，遍历得到item对象

  2. 利用item.id执行操作

  3. 执行完操作，需要重新刷新页面：调用this.request()

    // 多选执行删除操作
    handleDelete = (()=>{
        let rows = this.state.selectedRows;
        let ids = [];
        rows.map((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title:'删除提示',
            content:`您确定要删除这些数据吗？${ids.join(',')}`,
            onOk:()=>{
                message.success('删除成功');
                this.request(); //重新刷新页面
            }
        })
    })

4、request方法中：当获取数据成功后，重置state中当前选中项参数均为空

selectedRowKeys: [], //重置
selectedRows: null,

5、其它，同单选

<Card title="Mock-复选" style={{margin: '10px 0'}}>
        <div style={{marginBottom: 10}}>
               <Button onClick={this.handleDelete}>删除</Button>
        </div>
        <Table 
                bordered
                rowSelection={rowCheckSelection}
                onRow={(record, index) => {
                        return {
                            onClick: () => { 
                                this.onRowClick(record, index)
                            }  //点击行
                        }
                }}
                columns={columns}
                dataSource={this.state.dataSource2}
                pagination={false}
        />
</Card>

五、表格分页

  •  src->utils->utils.js：封装pagination分页工具函数 【项目工程化】
pagination(data,callback){
   return {
        onChange: (current) => {
            callback(current)   //回调函数返回当前页
        },
        current: data.page,
        pageSize: data.page_size,
        total: data.total,
        showTotal: () => {
            return  `共${data.total}条`
        },
        showQuickJumper: true  //是否快速跳转至某一页
   }
}　　

注意：获取data对象的数据，需要符合Easy Mock中模拟数据的数据结构！！！

Mock数据修改如下：

  • request方法中：当获取数据成功后，调用Utils.pagination()给state添加并配置pagination
import Utils from './../../utils/utils'
 
let _this = this; //保留外层this，否则this指向会有问题
 
pagination: Utils.pagination(res,(current) => {
       _this.params.page = current;
       this.request();
})
  • Table组件中使用pagination属性
<Card title="Mock-表格分页" style={{margin: '10px 0'}}>
      <Table 
                bordered
                columns={columns}
                dataSource={this.state.dataSource2}
                pagination={this.state.pagination}
       />
</Card>

 

 

 

 

 

老张谋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React:React全家桶+AntD 共享单车后台管理系统开发
04-27
React全家桶+AntD 共享单车后台管理系统开发 课程导学 拿到产品需求，怎么做？ 如何技术选型？ 如何项目架构？ 如何项目规范？ 如何封装项目公共机制？ 如何提高开发效率 课程概述 React 全家桶 React基础知识、生命...
border属性 php,border属性_用法示例-javascript词典-js编程词典-php中文网
weixin_39971435的博客
04-01 176
英 [ˈbɔ:də(r)] 美 [ˈbɔ:rdə(r)]n.边界;边;镶边;包边vt.& vi.与…接界，在…的边上vt.沿…的边，环绕…，给…镶边vi.近似，毗邻第三人称单数： borders 复数： borders 现在分词： bordering 过去式： bordered 过去分词： borderedjavascript border属性 语法作用：设置所有边框属性。语法：Obj...
antd Table 源码分析
qq_39406460的博客
11-08 2128
antd的部分组件是基于封装而来的，今天我们要讲的antd table也是基于/**table**封装而来的，这次antd的源码解析，大部分也是基于rc-table，这次源码分析主要是讲一些特殊的知识点。如果想了解更多，可以评论一下，我看到评论后会添加。
Ant-design 源码分析之数据展示（十二）Tabs
qq_37588125的博客
12-26 2390
Ant-design 源码分析之数据展示（十二）Tabs 2021SC@SDUSC 一、组件结构 1、ant代码结构
react + antd个人表格组件化，以及源码分享。
zhuangweizhan的博客
08-07 793
使用： 页面只需引入对应模块：import MyTable from '../component/myTable.js'; 对应的组件为： <MyTable columns={this.state.columns} reloadTableFunc={this.state.reloadTableFunc} reloadTableKey={this.state.rel...
vue + antd中Table自定义列查询筛选
weixin_43923202的博客
04-06 5535
html <a-table :columns="columns" :data-source="projectTable" bordered :pagination='false' size="middle" :scroll="{ x: '100%', y: 400 }" > <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, con
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频
06-15
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频
react-antd-demo:学习react+react-router +antd 搭环境
04-30
git clone :modanzuo/react-antd-demo.git #框架用到的库 antd react react-app-rewired react-router react-router-dom fetch #运行 安装库 npm install #本地开发 yarn yarn run start npm npm run start ...
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...
ant-design-vue a-table通过字段的状态展示对应的文字，三元表达式多个条件判断，后端返数字，前端展示文字
花椒和蕊的博客
07-27 4371
在data的columns中，通过scopedSlots渲染名叫type的插槽 columns: [ { title: '类型', dataIndex: 'fInCertificationType', scopedSlots: { customRender: 'type' }, }, ], 在a-table中 <span slot="type" slot-scope="t
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
此仓库已废弃 重要： 此仓库后续不再维护，也不再接受更多的特性更新。ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问 了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。 @ant-design/pro-table :trophy: Use Ant Design Table like a Pro! Demo API pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd table 不同的 api。 Table 属性 描述 类型 默认值 request 一个获得 dataSource 的方法 (params?: {pageSize: number;current: number;[key: s
antd可伸缩列源码.zip
11-20
本附件对应本人写的原创技术文章《antd可伸缩列实现优化》，该文章在antd官网实现可伸缩列宽的基础上进行优化。文章链接：https://blog.csdn.net/bin_zi_123/article/details/103163225
react-ReactTable一个快速轻量级固执己见的React数据表格
08-15
React Table - 一个快速、轻量级、固执己见的React数据表格
react-hook-and-antd-table:React钩和蚂蚁表
04-02
React挂钩和蚂蚁表 React钩和蚂蚁表 # js $ yarn create react-app react-hooks-and-antd-table-app $ npx create-react-app react-hooks-and-antd-table-app # typescript $ yarn create react-app react-hooks-and-antd-table-ts-app --typescript $ yarn add --exact react react-dom react-scripts cra-template :sparkles: Done in 7.66s. Success ! Created react-hooks-and-antd-table-app at /Users/xgqfrms-mbp/Documents/GitHub/react-hook-
前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
solocoder的博客
03-29 7075
前端导出 excel 的需求很多，但市面上好用的库并不多，讲明白复杂使用场景的文章更少。 本文将以文字 + demo 源码的形式，力求讲清楚满足 99% 使用场景的终极 excel 导出方案。 如果项目中用到了 AntD，那就更简单了，因为 Table 本身已经设置好了 column 和 dataSource，只需解析 column 和 dataSource 即可快速导出 Excel。 实现功能： 简单表格导出 为表格添加样式（更改背景色、更换字体、字号、颜色） 设置行高、列宽 解析 ant-design
【React工作记录七十四】ant design tabCard封装
geyaoisnice的博客
07-26 163
react
基于ant-design-vue table 组件的使用
qq_36437172的博客
08-28 7241
需求分析：这里主要介绍表格的字段渲染（筛选和排序），分页设置，选择功能设置等功能。 1.表格渲染（筛选和排序） <a-table ref="TableInfo" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading" :rowSelection="...
AntD Vue中a-table的使用
浪潮行舟_chenjin2136
02-15 2901
最近在一个后台管理系统中用到AntD，其中对表格用的比较多。对常见的表格处理进行简要总结
React全家桶+AntD共享单车-后台管理系统开发-笔记-02
mysteryflower的专栏
12-02 571
第三章 主页面架构设计 详细介绍了初始项目的插件安装、主题定制以及主页面结构设计。 3-1 基础插件安装(1) 3-2基础插件安装(2) 3-3 （安装课程中Webpack版本的用户请忽略这一小节）Webpack4.19.1版本文件合并后配置按需加载 3-4 页面结构开发（1） 3-5 页面结构开发（2） 3-6 菜单组件开发（1） 3-7 菜单组件开发（2） 3-8 头部组件实现（1） 3...
react全家桶+antd框架开发共享单车后台管理系统
最新发布
12-14
综上所述，使用React全家桶和Ant Design框架开发共享单车后台管理系统，可以提高开发效率、代码可维护性和用户体验。同时，Ant Design的美观、可靠的组件库能够有效地帮助我们构建一个优质的后台管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值