表格结构搭建
传送门
- 删除标签、删除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>
- 实现效果图