前言：以下內容基於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函數即可啟動排序按鈕
- 在column3表頭設置中：給age年齡字段指定sorter函數，並添加sorterOrder屬性
{ title: '年齡', dataIndex: 'age', key: 'age', sorter: (a, b) => { return a.age - b.age; }, sortOrder: this.state.sortOrder } -
handleChange方法中：傳入sorter函數返回值，將當前排序狀態sorter.order存入state中
handleChange = (pagination, filters, sorter) => { this.setState({ sortOrder: sorter.order }) }
四、操作按鈕
- 徽標Badge組件
- 用不同的徽標，標識不同狀態
- 在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] } }
-
列中添加操作按鈕
- render方法：生成復雜數據的渲染函數，參數分別為當前行的值text，當前行數據item，行索引index
-
直接在column4的最后一項中：render一個按鈕，監聽OnClick事件，傳入當前行數據item
{ title: '操作', render: (text, item) => { //注意 this 為 render 方法內部的this return <Button size="small" onClick={(item) => {this.handleDelete(item)}}>刪除</Button> } } -
執行操作方法
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> ) } }
注：項目來自慕課網