（记录笔记6）——6.1 Table基础表格

最新推荐文章于 2021-03-22 21:18:20 发布
最新推荐文章于 2021-03-22 21:18:20 发布
阅读量291 收藏
点赞数
分类专栏： S.AntD后台项目 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/84862404
版权

6.1 Table基础表格

展示行列数据

文章目录

一.基础表格

1.Table组件

  • 引入Table:import {Table} from “antd”;

  • 通过指定 columns + dataSource实现一个基础表格

  • columns={columns}
    dataSource={this.state.dataSource}

  • 通过指定pagination + bordered控制边框显示 和 分页

  •  //bordered    配置边框
 //不显示分页     去掉分页
 // +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:'2000-01-01',
        address:'北京市海淀区奥林匹克公园',
        time:'09:00'
      },
      {
        id:'2',
        userName: 'Lily',
        sex:'1',
        state:'1',
        interest:'1',
        birthday:'2000-01-01',
        address:'北京市海淀区奥林匹克公园',
        time:'09:00'
      }
    ]
    //将数据存入state中保存
    this.setState({
      dataSource:data
    });
  }

  render() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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'
      }
    ]
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    return (
      <div>
        <Card title="基础表格">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={false}
          >

          </Table>
        </Card>
      </div>
    );
  }
}

二.Table动态渲染

项目工程化:

  • Mock数据(第三方工具)-----------https://easy-mock.com/login

    • 可以查看Mockjs规范
    • Mock.js语法

  • Axios-----------封装

    • + import axios from 'axios';

      去npm官网查询插件的使用

    • componentDidMount() {
    ...
	this.request();//初始化调用数据
}

// 动态获取mock数据  then  成功时打印数据
request=()=>{
    const baseUrl = 'https://easy-mock.com/mock/5c0893b83b84ee1919884836/mock.api';
    axios.get(baseUrl+'/table/list1').then((res)=>{
        console.log(JSON.stringify(res));
    })
}
render()

  • Loading处理 ,错误拦截

  • mock数据:

{
   "code": 0,
   "msg": "",
   "result|10": [{
   	"id|+1": 1,
   	userName: '@cname',
   	"sex|1-2": 1,
   	"state|1-5": 1,
   	"interest|1-8": 1,
   	isMarried: "1",
   	birthday: '2000-01-01',
   	address: '北京市海淀区奥林匹克公园',
   	time: '09:00'
   	}],
   }

三 封装axios Api

//src/axios/index.js
//对jsonp的方法进行封装
import JsonP from "jsonp";//*导入jsonp的插件
import axios from 'axios';//*导入axios插件
import {Modal} from "antd";
//导出一个对象供其他对象进行使用
export default class Axios {
  static jsonp(options) {//定义静态的方法   jsonp  供其他页面进行使用
    return new Promise((resolve, reject) => {//使用Promise解决函数间的嵌套问题   链式调用
      JsonP(options.url, {
        param: 'callback'
      }, function (err, response) {
        //to-do
        //传入JsoP的对象进行操作
        //如果返回的对象是成功,使用resolve方法进行返回
        //debugger;//通过这个打断点
        if (response.status == 'success') {//成功后  用resolve返回数据
          resolve(response);
        } else {    //失败后用reject返回数据
          reject(response.message);
        }
      })
    })
  }

  static ajax(options) {//封装axios   定义为ajax请求,使用Promise
    const baseApi = 'https://easy-mock.com/mock/5c0893b83b84ee1919884836/mock.api';
    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
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:'2000-01-01',
        address:'北京市海淀区奥林匹克公园',
        time:'09:00'
      },
      {
        id:'2',
        userName: 'Lily',
        sex:'1',
        state:'1',
        interest:'1',
        birthday:'2000-01-01',
        address:'北京市海淀区奥林匹克公园',
        time:'09:00'
      }
    ];
    //将数据存入state中保存
    this.setState({
      dataSource:data
    });

    this.request();//初始化调用数据
  }

  // 动态获取mock数据
  request=()=>{
   axios.ajax({
     url:'/table/list1',
     data:{
       params:{
         page:1
       }
     }
   }).then((res)=>{
     if(res.code==0){
       this.setState({
         dataSource2:res.result
       });
     }
   })
  }
  render() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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'
      }
    ];
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    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>
    );
  }
}

四 表格的loading 处理

拷贝loading.html中的代码+loading.css到public 和 style文件夹下 生成全局的dom 和样式

修改后的index.js如下

<!DOCTYPE html>
<html lang="en">
<!--public/index.html-->
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <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>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>


//src/pages/table/basicTable.js
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:'2000-01-01',
        address:'北京市海淀区奥林匹克公园',
        time:'09:00'
      },
      {
        id:'2',
        userName: 'Lily',
        sex:'1',
        state:'1',
        interest:'1',
        birthday:'2000-01-01',
        address:'北京市海淀区奥林匹克公园',
        time:'09:00'
      }
    ];
    //将数据存入state中保存
    this.setState({
      dataSource:data
    });

    this.request();//初始化调用数据
  }

  // 动态获取mock数据
  request=()=>{
   axios.ajax({
     url:'/table/list1',
     data:{
       params:{
         page:1
       },
       // //  增加下方代码,则不会Loading
       // isShowLoading:false
     }
   }).then((res)=>{
     if(res.code==0){
       this.setState({
         dataSource2:res.result
       });

     }
   })
  };
  render() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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'
      }
    ];
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    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>
    );
  }
}



//src/axios/index.js
//对jsonp的方法进行封装
import JsonP from "jsonp";//*导入jsonp的插件
import axios from 'axios';//*导入axios插件
import {Modal} from "antd";
//导出一个对象供其他对象进行使用
export default class Axios {
  static jsonp(options) {//定义静态的方法   jsonp  供其他页面进行使用
    return new Promise((resolve, reject) => {//使用Promise解决函数间的嵌套问题   链式调用
      JsonP(options.url, {
        param: 'callback'
      }, function (err, response) {
        //to-do
        //传入JsoP的对象进行操作
        //如果返回的对象是成功,使用resolve方法进行返回
        //debugger;//通过这个打断点
        if (response.status == 'success') {//成功后  用resolve返回数据
          resolve(response);
        } else {    //失败后用reject返回数据
          reject(response.message);
        }
      })
    })
  }

  static ajax(options) {//封装axios   定义为ajax请求,使用Promise
    let loading;
    if(options.data && options.data.isShowLoading !== false){
      loading = document.getElementById('ajaxLoading');
      loading.style.display = 'block';
    }
    const baseApi = 'https://easy-mock.com/mock/5c0893b83b84ee1919884836/mock.api';
    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);
        }
      })
    });
  }
}

五 修改渲染方式,显示对应信息

增加render方法显示对应信息

+ const columns = [ {
        title: '性别',
        dataIndex: 'sex',
        render(sex) {
        return sex == 1 ? '男' : '女'
        }
    }
    ...
    ]

演示

//src/axios/index.js
//对jsonp的方法进行封装
import JsonP from "jsonp";//*导入jsonp的插件
import axios from 'axios';//*导入axios插件
import {Modal} from "antd";
//导出一个对象供其他对象进行使用
export default class Axios {
  static jsonp(options) {//定义静态的方法   jsonp  供其他页面进行使用
    return new Promise((resolve, reject) => {//使用Promise解决函数间的嵌套问题   链式调用
      JsonP(options.url, {
        param: 'callback'
      }, function (err, response) {
        //to-do
        //传入JsoP的对象进行操作
        //如果返回的对象是成功,使用resolve方法进行返回
        //debugger;//通过这个打断点
        if (response.status == 'success') {//成功后  用resolve返回数据
          resolve(response);
        } else {    //失败后用reject返回数据
          reject(response.message);
        }
      })
    })
  }

  static ajax(options) {//封装axios   定义为ajax请求,使用Promise
    let loading;
    if(options.data && options.data.isShowLoading !== false){
      loading = document.getElementById('ajaxLoading');
      loading.style.display = 'block';
    }
    const baseApi = 'https://easy-mock.com/mock/5c0893b83b84ee1919884836/mock.api';
    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
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: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      },
      {
        id: '2',
        userName: 'Lily',
        sex: '1',
        state: '1',
        interest: '1',
        birthday: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      }
    ];
    //将数据存入state中保存
    this.setState({
      dataSource: data
    });

    this.request();//初始化调用数据
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/list1',
      data: {
        params: {
          page: 1
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        this.setState({
          dataSource2: res.result
        });

      }
    })
  };

  render() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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(abc){
          let config = {
            '1':'?‍',
            '2':'?',
            '3':'⚽',
            '4':'?',
            '5':'?',
            '6':'?',
            '7':'?',
            '8':'?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        dataIndex: 'time'
      }
    ];
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    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>
    );
  }
}

六 在Table 中 嵌套单选按钮

rowSelection

选择功能的配置。 type:“radio” 指定单选

+ const rowSelection = {
  type:'radio'
}
...
+ rowSelection={rowSelection}

对表格中的每个数据,要去添加key

+ data.map((item,index)=>{
+      item.key = index;
+ })

+ const selectedRowKeys = this.state.selectedRowKeys;
+ const rowSelection = {
+   type:'radio',
+    selectedRowKeys
+ }

onRow

通过设置onRow属性,让用户点击Row(行),可以选中Radio(单选)

//src/pages/table/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: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      },
      {
        id: '2',
        userName: 'Lily',
        sex: '1',
        state: '1',
        interest: '1',
        birthday: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      }
    ];
    //动态添加key
    data.map((item,index)=>{
      item.key = index;
    });
    //将数据存入state中保存
    this.setState({
      dataSource: data
    });

    this.request();//初始化调用数据
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/list1',
      data: {
        params: {
          page: 1
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).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() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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(abc){
          let config = {
            '1':'?‍',
            '2':'?',
            '3':'⚽',
            '4':'?',
            '5':'?',
            '6':'?',
            '7':'?',
            '8':'?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        dataIndex: 'time'
      }
    ];
    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
      type:'radio',
      selectedRowKeys
    };
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    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>
    );
  }
}

七 复选按钮

//src/pages/table/basicTable.js
import React from 'react';
import {Card, Table, Modal, Button,message} 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: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      },
      {
        id: '2',
        userName: 'Lily',
        sex: '1',
        state: '1',
        interest: '1',
        birthday: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      }
    ];
    //动态添加key
    data.map((item,index)=>{
      item.key = index;
    });
    //将数据存入state中保存
    this.setState({
      dataSource: data
    });

    this.request();//初始化调用数据
  }

  // 动态获取mock数据
  request = () => {
    axios.ajax({
      url: '/table/list1',
      data: {
        params: {
          page: 1
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.map((item,index)=>{
           item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource2: res.result,
          selectedRowKeys:[],
          selectedRows:null
        });

      }
    })
  };

  onRowClick = (record,index)=>{
    let selectKey = [index];
    Modal.info({
      title:'信息',
      content:`用户名:${record.userName},用户爱好:${record.interest}`
    });
    this.setState({
      selectedRowKeys:selectKey,
      selectedItem:record
    })
  };
  //多选执行删除动作
  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();//删除成功,将页面刷新
      }
    })

  });
  render() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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(abc){
          let config = {
            '1':'?‍',
            '2':'?',
            '3':'⚽',
            '4':'?',
            '5':'?',
            '6':'?',
            '7':'?',
            '8':'?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        dataIndex: 'time'
      }
    ];
    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
      type:'radio',
      selectedRowKeys
    };

    const rowCheckSelection = {
      type:'check',
      selectedRowKeys,
      onChange:(selectedRowKeys,selectedRows)=>{
        this.setState({
          selectedRowKeys,
          selectedRows
        });
      }
    };
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    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>
        <Card title="Mock-复选" style={{margin: '10px 0'}}>
          <div style={{marginBottom:10}}>
            <Button onClick={this.handleDelete}>删除</Button>
          </div>
          <Table
            bordered
            rowSelection={rowCheckSelection}

            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>
      </div>
    );
  }
}

八 表格分页

官网的分页组件有些复杂, 要为每个表格添加组件

比较复杂,这里通过封装公共机制进行简化

<Pagination onChange={onChange} total={50} />
参数说明类型默认值
current当前页数number-
defaultCurrent默认的当前页数number1
onChange页码改变的回调，参数是改变后的页码及每页条数Function(page, pageSize)noop

修改 mock api接口

{
  "code": 0,
  "msg": "",
  "result": {
    "list|5": [{
      "id|+1": 1,
      userName: '@cname',
      "sex|1-2": 1,
      "state|1-5": 1,
      "interest|1-8": 1,
      isMarried: "1",
      birthday: '2000-01-01',
      address: '北京市海淀区奥林匹克公园',
      time: '09:00'
    }],
    page: 1,
    page_size: 10,
    total: 100
  }
}

//src/utils/utils.js
export default {
    formateDate(time) {
        if (!time) return '';
        let date = new Date(time);
        return date.getFullYear() + '-' + (date.getMonth() + 1) +
                '-' + date.getDate() + ' ' +
             date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    },
    //封装pagination公共机制
    pagination(data,callback){
        let page = {
            onChange:(current)=>{
                callback(current)
            },
            current:data.result.page,
            pageSize:data.result.page_size,
            total:data.result.total,
            showTotal:()=>{
                return `共${data.result.total}条`
            },
            showQuickJumper:true
        }
        return page;
    }
}

//src/pages/table/basicTable.js
import React from 'react';
import {Card, Table, Modal, Button,message} from 'antd'
import axios from './../../axios/index';
import Utils from './../../utils/utils'
export default class BasicTable extends React.Component {
  state = {
    dataSource2: []
  };

  params = {
    page:1
  }

  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: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      },
      {
        id: '2',
        userName: 'Lily',
        sex: '1',
        state: '1',
        interest: '1',
        birthday: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      }
    ];
    //动态添加key
    data.map((item,index)=>{
      item.key = index;
    });
    //将数据存入state中保存
    this.setState({
      dataSource: data
    });

    this.request();//初始化调用数据
  }

  // 动态获取mock数据
  request = () => {
    let _this = this;
    axios.ajax({
      url: '/table/list1',
      data: {
        params: {
          page: this.params.page
        },
        // //  增加下方代码,则不会Loading
        // isShowLoading:false
      }
    }).then((res) => {
      if (res.code == 0) {
        res.result.list.map((item,index)=>{
           item.key = index
        });
        this.setState({//页面刷新,不保留选中字段
          dataSource2: res.result.list,
          selectedRowKeys:[],
          selectedRows:null,
          pagination:Utils.pagination(res,(current)=>{
            //@todo
            _this.params.page = current;
            _this.request();
          })
        });

      }
    })
  };

  onRowClick = (record,index)=>{
    let selectKey = [index];
    Modal.info({
      title:'信息',
      content:`用户名:${record.userName},用户爱好:${record.interest}`
    });
    this.setState({
      selectedRowKeys:selectKey,
      selectedItem:record
    })
  };
  //多选执行删除动作
  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();//删除成功,将页面刷新
      }
    })

  });
  render() {
    /*title:'id',       展示表头显示内容显示id
      dataIndex:'id'    返回的索引值

      */
    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(abc){
          let config = {
            '1':'?‍',
            '2':'?',
            '3':'⚽',
            '4':'?',
            '5':'?',
            '6':'?',
            '7':'?',
            '8':'?',
          };
          return config[abc];
        }
      },
      {
        title: '生日',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        dataIndex: 'time'
      }
    ];
    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
      type:'radio',
      selectedRowKeys
    };

    const rowCheckSelection = {
      type:'check',
      selectedRowKeys,
      onChange:(selectedRowKeys,selectedRows)=>{
        this.setState({
          selectedRowKeys,
          selectedRows
        });
      }
    };
    //bordered    配置边框
    //不显示分页     去掉分页
    // +   pagination={false}
    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>
        <Card title="Mock-复选" style={{margin: '10px 0'}}>
          <div style={{marginBottom:10}}>
            <Button onClick={this.handleDelete}>删除</Button>
          </div>
          <Table
            bordered
            rowSelection={rowCheckSelection}

            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>

        <Card title="Mock-表格分页" style={{margin: '10px 0'}}>
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination}
          />
        </Card>
      </div>
    );
  }
}

API

Table

参数说明类型默认值
columns表格列的配置描述，具体项见下表ColumnProps[]-

Column#

参数说明类型默认值
dataIndex列数据在数据项中对应的 key，支持 a.b.c、a[0].b.c[1] 的嵌套写法string-

经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

方法说明类型
getFieldDecorator用于和表单进行双向绑定，详见下方描述
getFieldError获取某个输入控件的 ErrorFunction(name)
getFieldsError获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 ErrorFunction([names: string[]])
getFieldsValue获取一组输入控件的值，如不传入参数，则获取全部组件的值Function([fieldNames: string[]])
getFieldValue获取一个输入控件的值Function(fieldName: string)

rowSelection#

选择功能的配置。

参数说明类型默认值
selectedRowKeys指定选中项的 key 数组，需要和 onChange 进行配合string[][]
onRow设置行属性Function(record, index)
<Pagination onChange={onChange} total={50} />
参数说明类型默认值
current当前页数number-
defaultCurrent默认的当前页数number1
onChange页码改变的回调，参数是改变后的页码及每页条数Function(page, pageSize)noop
pageSize每页条数number-
total数据总数number0
showTotal用于显示数据总量和当前数据顺序Function(total, range)-
showQuickJumper是否可以快速跳转至某页booleanfalse
小李科技
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
react表格加载之前如何实现loading
weixin_43021174的博客
12-31 1530
将下面代码复制到public/index.html文件里面，将它变成全局的html文件，这样已经生成了全局的dom &lt;div class="ajax-loading" id="ajaxLoading" style="display: none;"&gt; &lt;div class="overlay"&gt;&lt;/div&gt; &lt;d
C++基础学习笔记————网课
最新发布
08-18
个人网课学习笔记
React09——使用脚手架编程
小白的学习路
03-22 525
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化,..
共享单车管理系统
02-04
基于react+antd项目搭建成一个简单的共享单车系统，此项目可以帮你熟悉antd常用的组件，另外可以熟悉react
【共享单车】—— React后台管理系统开发手记：项目准备
柳柳66的博客
01-09 492
【共享单车】—— React后台管理系统开发手记：项目准备 前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。 一、项目概述       React全家桶 React基础知识、生命周期 ...
React学习笔记01-2018年3月
MauveDragon的专栏
03-29 918
计划学习掌握React这个前端，发现网上很多资料介绍都过时了，最新版rReact已是create-react-app@1.5.2 这个版本了。很意外发现github上React的官方介绍里有开发指南readme.md，看着不错，可以先看看。User Guide – How to develop apps bootstrapped with Create React App.用户指南-如何开发始于建...
AngularJS基础知识笔记之表格
12-29
表格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 <table> <th>Name <th>Marks <td>{{ subject.name }} <td>{{ subject.marks }} </...
Java基础 学习笔记 Markdownr版
06-27
本学习笔记主要涵盖了Java的基础知识，包括面向对象、集合、IO流、多线程、反射与动态代理以及Java 8的新特性等方面，旨在帮助初学者或有经验的开发者巩固和提升Java编程技能。 1. 面向对象（OOP）：Java的核心是...
Java笔记（一）——基础语法
12-22
文章目录Java 概述及版本HelloWorld变量常量数据类型String运算符算术运算符位运算符逻辑运算符关系运算符关系优先级关键字和语句方法流程控制数组用户输入操作 Java 概述及版本 Java 是由 Sun Microsystems 公司于 ...
dubbo笔记——项目实战
02-24
存在2个系统，A系统和B系统，A系统调用B系统的接口获取数据，用于查询用户列表。安装zookeeper，解压（zookeeper-3.4.8.tar.gz）得到如下：然后进入conf将zoo_sample.cfg改名成zoo.cfg。并相关如下内容：该目录为...
React中后台管理界面UIReactAdminUI
08-11
react admin dashboard ui LANIF-ADMIN --- react 16 react-router 4 dva 2 antd 3
移动端事件顺序、解决300毫秒点击延迟
weixin_43294560的博客
06-08 659
【代码】移动端事件顺序、解决300毫秒点击延迟。
（记录笔记15）——15.1 登录模块
小李科技
12-27 306
文章目录 Github地址 import React from 'react' import {Form, Input, Button} from 'antd' import Footer from '../../components/Footer' import './index.less' const FormItem = Form.Item; export default class L...
（笔记10）React共享单车后台管理系统开发——城市管理
Dream_Lee的博客
03-22 901
城市管理效果一、基础页面拆分Easy Mock城市管理的数据接口：顶部子组件一:选择表单componentDidMount():实例代码二、开通城市——弹框功能三、实例代码 效果 一、基础页面拆分 Easy Mock城市管理的数据接口： /open_city { "code": 0, "msg": "", "result": { "item_list|10": [{ ...
（记录笔记4）——4.5 Tabs标签页
小李科技
11-27 866
4.5 Tabs标签页 选项卡切换组件。 文章目录4.5 Tabs标签页一.Tabs组件二.基本实例三. Tab带图标页签四. Tab可关闭卡片式页签API[#](https://ant.design/components/message-cn/#API)Tabs.TabPane[#](https://ant.design/components/tabs-cn/#Tabs.TabPane) 一...
React全家桶+共享单车实战开发-——7 AntD Table 基础表格
zjl-wgf
08-29 491
可参考：https://blog.csdn.net/qq_34235864/article/details/86580869 一、基础表格 Table组件基础Api bordered属性：是否展示外边框和列边框 columns属性：表格列的配置描述（即表头） dataSource属性：数据数组 pagination属性：分页器，设为 false 时不展示和进行分页 src-&g...
react 基于antd 数据表格渲染使用
卡卡罗特的博客
01-07 6939
import React, { Component } from "react"; import { Table, Storage } from "carrot"; import Request from "srcDir/util/request"; import { Tabs, Card, Button, Modal, Tree, notification } from "antd"; imp...
面向对象编程基础——Java课堂笔记解析
"Java学习笔记概述了面向对象编程的核心概念，包括对象的定义、类的抽象、高内聚和低耦合的原则，以及面向对象与面向过程的区别。笔记强调了对象的属性（即数据结构）和方法（即算法），并介绍了类的定义和实例变量...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值