表格结构搭建
传送门
- 删除标签、删除data中的tags、删除年龄一列
完整代码
import React from 'react' import './less/ListTable.less' import { Table, Tag, Space } from 'antd'; export default function ListTable() { // 真正从后端拿的数据要替换这个data const data = [ { key: '1', name: 'John Brown', address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', address: 'Sidney No. 1 Lake Park', }, ]; // 每一列 const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', render: text => <a>{text}</a>, }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, { title: 'Action', key: 'action', render: (text, record) => ( <Space size="middle"> <a>Invite {record.name}</a> <a>Delete</a> </Space> ), }, ]; return ( <div className='list_table'> {/* columns列 dataSource数据 */} <Table columns={columns} dataSource={data} /> </div> ) } 复制代码
- 引入button（在Action下面）
// 引入button import { Table, Button, Space } from 'antd'; //书写button编辑、删除 <Button type='primary' >编辑</Button> <Button type='danger'>删除</Button> 复制代码
- 隐藏表头
- 在Table标签是添加showHeader属性
<Table columns={columns} showHeader = {false} dataSource={data} /> 复制代码
- 在columns中删除标题
// 每一列 const columns = [ { dataIndex: 'name', key: 'name', render: text => <a>{text}</a>, }, { dataIndex: 'age', key: 'age', }, { dataIndex: 'address', key: 'address', }, { key: 'action', render: (text, record) => ( <Space size="middle"> <Button type='primary' >编辑</Button> <Button type='danger'>删除</Button> </Space> ), }, ]; 复制代码
- 显示效果
- 渲染标题副标题
在第一列下面修改
{ dataIndex: 'name', key: 'name', render: text => ( <> <h4>标题</h4> <p>简直是大家</p> </> ), }, 复制代码
- 渲染时间
在第二列添加渲染
{ dataIndex: 'address', key: 'address', render: text => ( <p> 2022-03-03 20:33:06 </p> ) }, 复制代码
- 改变第一列的宽度
使用width属性
- 修改副标题颜色
{ dataIndex: 'name', key: 'name', width:'60%', render: text => ( <> <h4>标题</h4> <p style={{color:'#999'}}>简直是大家</p> </> ), }, 复制代码
在p标签中添加style属性
<p style={{color:'#999'}}>简直是大家</p> 复制代码
- 实现效果
- 修改标题实现跳转
引入Link
import {Link} from 'react-router-dom' 复制代码
修改标签
<Link to="/" className='table_title'>标题</Link> 复制代码
// 标题样式 .table_title{ color: #333; &:hover { color: #1890ff; } } 复制代码
- 使用useState更新data数据
将原先的data数组传入arr变量中
// 引入useState import React,{useState} from 'react' // 初始化 const [arr,setArr] = useState([ { key: '1', name: 'John Brown', address: 'New York No. 1 Lake Park', } ]) // 更改Table标签的属性、dataSource的属性值 <Table columns={columns} showHeader = {false} dataSource={arr} /> 复制代码
axios请求格式
get请求必须书写params
axios.get({ params: { num:1 } }) axios.post({ num:1 }) 复制代码
- 书写获取文章的api
api.js文件下
// 获取文章列表 export const ArticleListApi = (params) => request.get('/article', {params}) 复制代码
在ListTable.jsx中引入api
import { ArticleListApi } from '../request/api'; 复制代码
- 使用useEffect来请求文章列表
// 引入useEffect import React,{useState, useEffect} from 'react' // 请求文章列表 useEffect(() => { ArticleListApi().then(res=>{ console.log(res.data) }) }, []); 复制代码
数据处理
- 解决副标题无法渲染，数组无key值
生成一个新数组，然后map遍历赋值一个新key值
// 请求文章列表 useEffect(() => { ArticleListApi().then(res=>{ if(res.errCode === 0) { let newArr = JSON.parse(JSON.stringify(res.data.arr)) /* 1. 要给每个数组项加key，让key=id 2. 需要有一套标签结构，赋予一个属性 */ newArr.map(item=> { item.key = item.id; item.mytitle = ` <> <Link to="/" className='table_title'>标题</Link> <p style={{color:'#999'}}>简直是大家</p> </> `; }) console.log(newArr) } }) }, []); 复制代码
- 工作台
列表渲染
- 使用setArr传入newArr
- 规范渲染时间date
在第二列将dataIndex、key修改为date
{ dataIndex: 'date', key: 'date', render: text => ( <p> {text} </p> ) }, 复制代码
- 安装moment
yarn add moment
- 引入moment
import moment from 'moment' 复制代码
- 整改date
item.date = moment(item.date).format("YYYY-MM-DD hh:mm:ss") 复制代码
- 渲染文章标题
item.mytitle = ` <div> <Link to="/" className='table_title'>${item.title}</Link> <p style={{color:'#999'}}>${item.subTitle}</p> </div> `; render: text => <div dangerouslySetInnerHTML={{__html:text}}></div> 复制代码
记得修改
dataIndex: 'mytitle', key: 'mytitle', 复制代码
- 实现效果
更换更好的渲染标题的方法
创建一个myArr数组保存对象obj。每次遍历newArr的时候就创建一个obj。通过props属性将获得的标题传递给MyTitle组件。
将mytitle的值改写为MyTitle组件 记得去掉$ 和修改props。
function MyTitle(props) { return ( <div> <Link to="/" className='table_title'>{props.title}</Link> <p style={{color:'#999'}}>{props.subTitle}</p> </div> ) } 复制代码
创建对象obj
// 声明一个空数组 let myarr = [] newArr.map(item => { let obj = { key: item.id, date: moment(item.date).format("YYYY-MM-DD hh:mm:ss"), mytitle: <MyTitle id={item.id} title={item.title} subTitle={item.subTitle} /> } myarr.push(obj) }) setArr(myarr) // 注意在对应的列中更改渲染 render: text => <div>{text}</div> 复制代码
- 实现效果图
