【共享单车】—— React后台管理系统开发手记：AntD Table高级表格

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

---

一、头部固定

• scroll属性：设置横向或纵向滚动，也可用于指定滚动区域的宽和高

  <Card title="头部固定">
            <Table 
                  bordered
                  columns={columns}
                  dataSource={this.state.dataSource}
                  pagination={false}
                  scroll={{y: 240}}
             />
   </Card>
  

  此处：y方向限制的高度240px小于表格总高度，便可纵向滚动

 

二、左侧固定

• 设置scoll属性：实现表格横向滚动

  <Card title="左侧固定" style={{margin: '10px 0'}}>
            <Table 
                   bordered
                   columns={columns2}
                   dataSource={this.state.dataSource}
                   pagination={false}
                   scroll={{x: 1130}}
             />
   </Card>
  

  此处：x方向限制的宽度1130px大于表格总宽度，便可横向滚动

• 在column2表头设置中：给id和username添加fixed属性为left，实现id与用户名固定在左侧

   const columns2 = [
           {
                title: 'id',   //表头标题
                key: 'id',
                width: 80,
                fixed: 'left',
                dataIndex: 'id' //数据源
           },
           {
                title: '用户名',
                key: 'userName',
                width: 80,
                fixed: 'left',
                dataIndex: 'userName'
           },
  

  　　

三、表格排序

• onChange事件：分页、排序、筛选变化时触发

  <Card title="表格排序" style={{margin: '10px 0'}}>
             <Table 
                      bordered
                      columns={columns3}
                      dataSource={this.state.dataSource}
                      pagination={false}
                      onChange={this.handleChange}
              />
  </Card>

• sorter函数：对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮

1. 在column3表头设置中：给age年龄字段指定sorter函数，并添加sorterOrder属性

   {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          sorter: (a, b) => {
                 return a.age - b.age;
          },
          sortOrder: this.state.sortOrder
   }　　

2. handleChange方法中：传入sorter函数返回值，将当前排序状态sorter.order存入state中

   handleChange = (pagination, filters, sorter) => {
           this.setState({
               sortOrder: sorter.order
           })
   }
   

   　

四、操作按钮

•  徽标Badge组件

1. 用不同的徽标，标识不同状态
2. 在column4表头设置中：给state的config中引用Badge

   {
       title: '状态',
       dataIndex: 'state',
       key: 'state',
       render(state){
              let config = {
                  '1': <Badge status="success" text="成功" />,
                  '2': <Badge status="error" text="报错" />,
                  '3': <Badge status="default" text="正常" />,
                  '4': <Badge status="processing" text="进行中" />,
                  '5': <Badge status="warning" text="警告" />,
             }
             return config[state]
      }
   }
   

• 列中添加操作按钮

1. render方法：生成复杂数据的渲染函数，参数分别为当前行的值text，当前行数据item，行索引index

2. 直接在column4的最后一项中：render一个按钮，监听OnClick事件，传入当前行数据item

   {
         title: '操作',
         render: (text, item) => {
               //注意 this 为 render 方法内部的this
               return <Button size="small" onClick={(item) => {this.handleDelete(item)}}>删除</Button>
        }
   } 

3. 执行操作方法

   handleDelete = (item) => {
           let id = item.id;
           Modal.confirm({
               title: '确认',
               content: '您确认要删除此条数据吗？',
               onOk: () => {
                   message.success('删除成功');
                   this.request();
               }
           })
   }
   

 

五、实例代码　　

• pages->table->highTable.js：对应路由/admin/high

  import React from 'react'
  import {Card, Table, Modal, Button, message, Badge} from 'antd'
  import axios from '../../axios/index'
  
  export default class HighTables extends React.Component{
      state = {
          dataSource: []
      }  
      params = {
          page: 1
      }
      componentDidMount(){
          this.request();
      }
      //动态获取mock数据
      request = () => {
          let _this = this;
          axios.ajax({
              url: '/table/list',
              data:{
                  params:{
                      page: this.params.page
                  },
                  // isShowLoading: false
              }
          }).then((res) => {
              if(res.code === 0){
              res.list.map((item, index) => {
                  item.key = index
              })
              this.setState({
                  dataSource: res.list
              })
              }
          })
      } 
  
      handleChange = (pagination, filters, sorter) => {
          this.setState({
              sortOrder: sorter.order
          })
      }
  
      handleDelete = (item) => {
          let id = item.id;
          Modal.confirm({
              title: '确认',
              content: '您确认要删除此条数据吗？',
              onOk: () => {
                  message.success('删除成功');
                  this.request();
              }
          })
      }
  
      render(){
          const columns = [
                  {
                      title: 'id',   //表头标题
                      key: 'id',
                      width: 80,
                      dataIndex: 'id' //数据源
                  },
                  {
                      title: '用户名',
                      key: 'userName',
                      width: 80,
                      dataIndex: 'userName'
                  },
                  {
                      title: '性别',
                      dataIndex: 'sex',
                      key: 'sex',
                      width: 80,
                      render(sex){
                          return sex === 1 ? '男' : '女'
                      }
                  },
                  {
                      title: '状态',
                      dataIndex: 'state',
                      key: 'state',
                      width: 80,
                      render(state){
                          let config = {
                              '1': '咸鱼一条',
                              '2': '人民公仆',
                              '3': '医院护士',
                              '4': '科技公司FE',
                              '5': '创业者'
                          }
                          return config[state]
                      }
                  },
                  {
                      title: '爱好',
                      dataIndex: 'interest',
                      key: 'interest',
                      width: 80,
                      render(abc){
                          let config = {
                              '1': '游泳',
                              '2': '打篮球',
                              '3': '踢足球',
                              '4': '跑步',
                              '5': '爬山',
                              '6': '骑行',
                              '7': '桌球',
                              '8': '麦霸'
                          }
                          return config[abc]
                      }
                  },
                  {
                      title: '生日',
                      dataIndex: 'birthday',
                      key: 'birthday',
                      width: 120,
                  },
                  {
                      title: '地址',
                      dataIndex: 'address',
                      key: 'address',
                      width: 120,
                  },
                  {
                      title: '早起时间',
                      dataIndex: 'time',
                      key: 'time',
                      width: 80
                  }       
         ]
          const columns2 = [
                  {
                      title: 'id',   //表头标题
                      key: 'id',
                      width: 80,
                      fixed: 'left',
                      dataIndex: 'id' //数据源
                  },
                  {
                      title: '用户名',
                      key: 'userName',
                      width: 80,
                      fixed: 'left',
                      dataIndex: 'userName'
                  },
                  {
                      title: '性别',
                      dataIndex: 'sex',
                      key: 'sex',
                      width: 80,
                      render(sex){
                          return sex === 1 ? '男' : '女'
                      }
                  },
                  {
                      title: '状态',
                      dataIndex: 'state',
                      key: 'state',
                      width: 80,
                      render(state){
                          let config = {
                              '1': '咸鱼一条',
                              '2': '人民公仆',
                              '3': '医院护士',
                              '4': '科技公司FE',
                              '5': '创业者'
                          }
                          return config[state]
                      }
                  },
                  {
                      title: '爱好',
                      dataIndex: 'interest',
                      key: 'interest',
                      width: 80,
                      render(abc){
                          let config = {
                              '1': '游泳',
                              '2': '打篮球',
                              '3': '踢足球',
                              '4': '跑步',
                              '5': '爬山',
                              '6': '骑行',
                              '7': '桌球',
                              '8': '麦霸'
                          }
                          return config[abc]
                      }
                  },
                  {
                      title: '生日',
                      dataIndex: 'birthday',
                      key: 'birthday',
                      width: 120,
                  },
                  {
                      title: '地址',
                      dataIndex: 'address',
                      key: 'address',
                      width: 120,
                  },
                  {
                      title: '早起时间',
                      dataIndex: 'time',
                      key: 'time',
                      width: 120
                  }, {
                      title: '生日',
                      dataIndex: 'birthday',
                      key: 'birthday2',
                      width: 120,
                  },
                  {
                      title: '地址',
                      dataIndex: 'address',
                      key: 'address2',
                      width: 120,
                  },
                  {
                      title: '早起时间',
                      dataIndex: 'time',
                      key: 'time2',
                      width: 120
                  }             
          ] 
          const columns3 = [
              {
                  title: 'id',   //表头标题
                  key: 'id',
                  dataIndex: 'id' //数据源
              },
              {
                  title: '用户名',
                  key: 'userName',
                  dataIndex: 'userName'
              },
              {
                  title: '性别',
                  dataIndex: 'sex',
                  key: 'sex',
                  render(sex){
                      return sex === 1 ? '男' : '女'
                  }
              },
              {
                  title: '年龄',
                  dataIndex: 'age',
                  key: 'age',
                  sorter: (a, b) => {
                      return a.age - b.age;
                  },
                  sortOrder: this.state.sortOrder
              },
              {
                  title: '状态',
                  dataIndex: 'state',
                  key: 'state',
                  render(state){
                      let config = {
                          '1': '咸鱼一条',
                          '2': '人民公仆',
                          '3': '医院护士',
                          '4': '科技公司FE',
                          '5': '创业者'
                      }
                      return config[state]
                  }
              },
              {
                  title: '爱好',
                  dataIndex: 'interest',
                  key: 'interest',
                  render(abc){
                      let config = {
                          '1': '游泳',
                          '2': '打篮球',
                          '3': '踢足球',
                          '4': '跑步',
                          '5': '爬山',
                          '6': '骑行',
                          '7': '桌球',
                          '8': '麦霸'
                      }
                      return config[abc]
                  }
              },
              {
                  title: '生日',
                  dataIndex: 'birthday',
                  key: 'birthday',
              },
              {
                  title: '地址',
                  dataIndex: 'address',
                  key: 'address',
              },
              {
                  title: '早起时间',
                  dataIndex: 'time',
                  key: 'time'
              }       
          ]
          const columns4 = [
              {
                  title: 'id',   //表头标题
                  key: 'id',
                  dataIndex: 'id' //数据源
              },
              {
                  title: '用户名',
                  key: 'userName',
                  dataIndex: 'userName'
              },
              {
                  title: '性别',
                  dataIndex: 'sex',
                  key: 'sex',
                  render(sex){
                      return sex === 1 ? '男' : '女'
                  }
              },
              {
                  title: '年龄',
                  dataIndex: 'age',
                  key: 'age'
              },
              {
                  title: '状态',
                  dataIndex: 'state',
                  key: 'state',
                  render(state){
                      let config = {
                          '1': <Badge status="success" text="成功" />,
                          '2': <Badge status="error" text="报错" />,
                          '3': <Badge status="default" text="正常" />,
                          '4': <Badge status="processing" text="进行中" />,
                          '5': <Badge status="warning" text="警告" />,
                      }
                      return config[state]
                  }
              },
              {
                  title: '爱好',
                  dataIndex: 'interest',
                  key: 'interest',
                  render(abc){
                      let config = {
                          '1': '游泳',
                          '2': '打篮球',
                          '3': '踢足球',
                          '4': '跑步',
                          '5': '爬山',
                          '6': '骑行',
                          '7': '桌球',
                          '8': '麦霸' 
                      }
                      return config[abc]
                  }
              },
              {
                  title: '生日',
                  dataIndex: 'birthday',
                  key: 'birthday',
              },
              {
                  title: '地址',
                  dataIndex: 'address',
                  key: 'address',
              },
              {
                  title: '操作',
                  render: (text, item) => {
                      //注意 this 为 render 方法内部的this
                      return <Button size="small" onClick={(item) => {this.handleDelete(item)}}>删除</Button>
                  }
              }       
          ]
  
         return (
           <div>
               <Card title="头部固定">
                  <Table 
                      bordered
                      columns={columns}
                      dataSource={this.state.dataSource}
                      pagination={false}
                      scroll={{y: 240}}
                  />
               </Card>
               <Card title="左侧固定" style={{margin: '10px 0'}}>
                  <Table 
                      bordered
                      columns={columns2}
                      dataSource={this.state.dataSource}
                      pagination={false}
                      scroll={{x: 1130}}
                  />
               </Card>
               <Card title="表格排序" style={{margin: '10px 0'}}>
                  <Table 
                      bordered
                      columns={columns3}
                      dataSource={this.state.dataSource}
                      pagination={false}
                      onChange={this.handleChange}
                  />
               </Card>
               <Card title="操作按钮" style={{margin: '10px 0'}}>
                  <Table 
                      bordered
                      columns={columns4}
                      dataSource={this.state.dataSource}
                      pagination={false}
                  />
               </Card>
           </div>  
         )
     }
  }

---

注：项目来自慕课网