current position:Home>Detailed breakdown of actual combat of CMS background system project (VII)

Detailed breakdown of actual combat of CMS background system project (VII)

2022-04-29 18:40:31Mo Haixiao

Form writing habits together ! This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 16 God , Click to see the event details .

Table structure construction

Portal

ant.design/components/…

  • Remove the label 、 Delete data Medium tags、 Delete the age column

Complete code

import React from 'react'
import './less/ListTable.less'
import { Table, Tag, Space } from 'antd';
export default function ListTable() {

  //  The data actually taken from the back end should be replaced by this 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',
  },
];

//  Each column 
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 Column  dataSource data  */}
       <Table columns={columns} dataSource={data} />
    </div>
  )
}
 Copy code 
  • introduce button( stay Action below )
//  introduce button

import { Table, Button, Space } from 'antd';

// Writing button edit 、 Delete 
      <Button type='primary' > edit </Button>
      <Button type='danger'> Delete </Button>
 Copy code 

image.png

  • Hide header

image.png

  • stay Table The tag is to add showHeader attribute
 <Table columns={columns} showHeader = {false} dataSource={data} />
 Copy code 
  • stay columns Delete the title
//  Each column 
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' > edit </Button>
      <Button type='danger'> Delete </Button>
      </Space>
    ),
  },
];
 Copy code 
  • According to the effect

image.png

  • Render Title subtitle

Modify... Under the first column

image.png

  {
    dataIndex: 'name',
    key: 'name',
    render: text => (
      <>
        <h4> title </h4>
        <p> It's like everyone </p>
      </>
    ),
  },
 Copy code 

image.png

  • render time

Add rendering in the second column

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

image.png

  • Change the width of the first column

Use width attribute

image.png

  • Change subtitle color
 {
    dataIndex: 'name',
    key: 'name',
    width:'60%',
    render: text => (
      <>
        <h4> title </h4>
        <p style={{color:'#999'}}> It's like everyone </p>
      </>
    ),
  },
 Copy code 

stay p Add... To the tag style attribute

    <p style={{color:'#999'}}> It's like everyone </p>
 Copy code 
  • Realization effect

image.png

  • Modify the title to jump

introduce Link

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

Modify the label

 <Link to="/" className='table_title'> title </Link>
 Copy code 
//  Heading styles 
    .table_title{
        color: #333;
        &:hover {
          color: #1890ff;
        }
      }
 Copy code 

image.png

  • Use useState to update data data

Put the original data Array passed in arr variable

//  introduce useState
import React,{useState} from 'react'

//  initialization 
  const [arr,setArr] = useState([
    {
      key: '1',
      name: 'John Brown',
      address: 'New York No. 1 Lake Park',
    }
  ])
  
//  change Table Attributes of the tag 、dataSource The attribute value 

<Table columns={columns} showHeader = {false} dataSource={arr} />
 Copy code 

axios Request format

get The request must be written params

axios.get({
    params: {
        num:1
    }
})

axios.post({
    num:1
})
 Copy code 
  • Write to get the article api

api.js Under the document

//  Get article list 
export const ArticleListApi = (params) => request.get('/article', {params})
 Copy code 

stay ListTable.jsx Introduction in api

import { ArticleListApi } from '../request/api';
 Copy code 
  • Use useEffect To request a list of articles
//  introduce useEffect
import React,{useState, useEffect} from 'react'

  //  Request article list 
  useEffect(() => {
    ArticleListApi().then(res=>{
     console.log(res.data)
   })
  }, []);

 Copy code 

Data processing

  • Solve the problem that subtitles cannot be rendered , Array none key value

Generate a new array , then map Traverse and assign a new key value

  //  Request article list 
  useEffect(() => {
    ArticleListApi().then(res=>{
      if(res.errCode === 0) {
        let newArr = JSON.parse(JSON.stringify(res.data.arr))
            /* 
                1.  Add... To each array item key, Give Way key=id
                2.  Need to have a label structure , Give an attribute 
            */
        newArr.map(item=> {
         item.key = item.id;
         item.mytitle = `
          <>
              <Link to="/" className='table_title'> title </Link>
              <p style={{color:'#999'}}> It's like everyone </p>
          </>
         `;
        })
        console.log(newArr)
      }
   })
  }, []);
 Copy code 
  • The workbench

image.png

The list of rendering

  • Use setArr Pass in newArr

  • Normalized rendering time date

In the second column dataIndex、key It is amended as follows date

  {
    dataIndex: 'date',
    key: 'date',
    render: text => (
      <p>
        {text}
      </p>
      )
  },
 Copy code 
  • install moment

yarn add moment

  • introduce moment
import moment from 'moment'
 Copy code 
  • Rectification date
   item.date = moment(item.date).format("YYYY-MM-DD hh:mm:ss")
 Copy code 
  • Render article title
 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>
 Copy code 

Remember to revise

dataIndex: 'mytitle',
key: 'mytitle',
 Copy code 
  • Realization effect

image.png

A better way to render titles

Create a myArr The array holds objects obj. Every time I traverse newArr Create a obj. adopt props Property to pass the obtained title to MyTitle Components .

take mytitle Change the value of to MyTitle Components Remember to get rid of $ And modify props.

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

Create objects obj

   //  Declare an empty array 
   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)

//  Note that the rendering... Is changed in the corresponding column 
    render: text =>  <div>{text}</div>
 Copy code 
  • Achieve the effect diagram

image.png

copyright notice
author[Mo Haixiao],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291840266043.html

Random recommended