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

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
import { Table, Button, Space } from 'antd';
//书写button编辑、删除
      <Button type='primary' >编辑</Button>
      <Button type='danger'>删除</Button>
复制代码

<Table columns={columns} showHeader = {false} dataSource={data} />
复制代码

// 每一列
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>
      )
  },
复制代码

{
    dataIndex: 'name',
    key: 'name',
    width:'60%',
    render: text => (
      <>
        <h4>标题</h4>
        <p style={{color:'#999'}}>简直是大家</p>
      </>
    ),
  },
复制代码

<p style={{color:'#999'}}>简直是大家</p>
复制代码

import {Link} from 'react-router-dom'
复制代码

<Link to="/" className='table_title'>标题</Link>
复制代码

// 标题样式
    .table_title{
        color: #333;
        &:hover {
          color: #1890ff;
        }
      }
复制代码

// 引入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: {
        num:1
    }
})
axios.post({
    num:1
})
复制代码

// 获取文章列表
export const ArticleListApi = (params) => request.get('/article', {params})
复制代码

import { ArticleListApi } from '../request/api';
复制代码

// 引入useEffect
import React,{useState, useEffect} from 'react'
  // 请求文章列表
  useEffect(() => {
    ArticleListApi().then(res=>{
     console.log(res.data)
   })
  }, []);
复制代码

// 请求文章列表
  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)
      }
   })
  }, []);
复制代码

{
    dataIndex: 'date',
    key: 'date',
    render: text => (
      <p>
        {text}
      </p>
      )
  },
复制代码

import moment from 'moment'
复制代码

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',
复制代码

function MyTitle(props) {
  return (
    <div>
        <Link to="/" className='table_title'>{props.title}</Link>
        <p style={{color:'#999'}}>{props.subTitle}</p>
    </div>
  )
}
复制代码

// 声明一个空数组
   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>
复制代码