《CMS后台系统》项目实战 详细分解(七)

表格结构搭建

传送门

ant.design/components/…

  • 删除标签、删除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> 

image.png

  • 隐藏表头

image.png

  • 在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>
    ),
  },
]; 
  • 显示效果

image.png

  • 渲染标题副标题

在第一列下面修改

image.png

 {
    dataIndex: 'name',
    key: 'name',
    render: text => (
      <>
        <h4>标题</h4>
        <p>简直是大家</p>
      </>
    ),
  }, 

image.png

  • 渲染时间

在第二列添加渲染

 {
    dataIndex: 'address',
    key: 'address',
    render: text => (
      <p>
        2022-03-03 20:33:06
      </p>
      )
  }, 

image.png

  • 改变第一列的宽度

使用width属性

image.png

  • 修改副标题颜色
 {
    dataIndex: 'name',
    key: 'name',
    width:'60%',
    render: text => (
      <>
        <h4>标题</h4>
        <p style={{color:'#999'}}>简直是大家</p>
      </>
    ),
  }, 

在p标签中添加style属性

 <p style={{color:'#999'}}>简直是大家</p> 
  • 实现效果

image.png

  • 修改标题实现跳转

引入Link

import {Link} from 'react-router-dom' 

修改标签

 <Link to="/" className='table_title'>标题</Link> 
// 标题样式
    .table_title{
        color: #333;
        &:hover {
          color: #1890ff;
        }
      } 

image.png

  • 使用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)
      }
   })
  }, []); 
  • 工作台

image.png

列表渲染

  • 使用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', 
  • 实现效果

image.png

更换更好的渲染标题的方法

创建一个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> 
  • 实现效果图

image.png

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值