【Umi】无数据表格 的简单实现（入门级~高手可以跳过hh）

无数据表格的 简单实现

小编是 React 初学者，都是基础知识~大佬们可以跳过hh

先看效果 （未调用接口数据时，初始状态）

表格是使用react +antd + ts编写的，借用 antd的 table组件

文件目录（page/user-manage/table-view.tsx）

代码解析

/**
 * 用户管理列表
 */
import React from 'react'
import dayjs from 'dayjs' // 日期时间JS工具库
import {
    
     Tooltip, Table, Popconfirm } from 'antd' // 文字提示框 表格 气泡确认框

const defaultRender = (text: string) => text || '--'

export default function TableView(props: any) {
    
    
  const columns: any = [
    {
    
    
      dataIndex: 'name', align: 'center', title: '用户名称', sorter: true,
      render: defaultRender 
    },
    {
    
    
      dataIndex: 'createTime', align: 'center', title: '创建时间', sorter: true,
      render: (text: string) => dayjs(text).format('YYYY-MM-DD hh:mm:ss')
    },
    {
    
    
       dataIndex: 'createUser', align: 'center', title: '创建人', sorter: true,
       render: defaultRender
    },
    {
    
    
       dataIndex: 'description', align: 'center', title: '描述',
       render: (text: string) => (
         <Tooltip title={
    
    text}>
           <div className='width200 elli'>{
    
    text}</div>
         </Tooltip>
       )
    },
    {
    
    
        dataIndex: 'operations', align: 'center', title: '操作',
        render: (text: string) => (
          <>
            <a className='color-main'>查看</a>
            <a className='pd2x color-main'>编辑</a>
            <Popconfirm title='此操作不可恢复，确认删除吗？'>
              <a className='color-main'>删除</a>
            </Popconfirm>
          </>
        )
    }
  ]
   
  render (
    <Table rowKey='id' size='small' bordered columns={
    
    columns}>
    </Table>
  )
}

组件解析

Tooltip (https://ant-design.gitee.io/components/tooltip-cn/#header)

---

代码演示：（官网其一）

import {
    
     Tooltip } from 'antd';

ReactDOM.render(
  <Tooltip title="prompt text">
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>,
  mountNode,
);

dayjs (看下面链接讲解)

https://www.cnblogs.com/cjrfan/p/9154539.html

Popconfirm（https://ant-design.gitee.io/components/popconfirm-cn/#header）

---

代码演示：（官网其一）

import {
    
     Popconfirm, message } from 'antd';

function confirm(e) {
    
    
  console.log(e);
  message.success('Click on Yes');
}

function cancel(e) {
    
    
  console.log(e);
  message.error('Click on No');
}

ReactDOM.render(
  <Popconfirm
    title="Are you sure delete this task?"
    onConfirm={
    
    confirm}
    onCancel={
    
    cancel}
    okText="Yes"
    cancelText="No"
  >
    <a href="#">Delete</a>
  </Popconfirm>,
  mountNode,
);

table (https://ant-design.gitee.io/components/table-cn/#header)

---

部分属性，详情还需看官网示例，标题有网址：

• table
  
  
  
  
  

• column

---

代码演示：（官网其一）

import {
    
     Table } from 'antd';

const columns = [
  {
    
    
    title: 'Name',
    dataIndex: 'name',
  },
  {
    
    
    title: 'Chinese Score',
    dataIndex: 'chinese',
    sorter: {
    
    
      compare: (a, b) => a.chinese - b.chinese,
      multiple: 3,
    },
  },
  {
    
    
    title: 'Math Score',
    dataIndex: 'math',
    sorter: {
    
    
      compare: (a, b) => a.math - b.math,
      multiple: 2,
    },
  },
  {
    
    
    title: 'English Score',
    dataIndex: 'english',
    sorter: {
    
    
      compare: (a, b) => a.english - b.english,
      multiple: 1,
    },
  },
];

const data = [
  {
    
    
    key: '1',
    name: 'John Brown',
    chinese: 98,
    math: 60,
    english: 70,
  },
  {
    
    
    key: '2',
    name: 'Jim Green',
    chinese: 98,
    math: 66,
    english: 89,
  },
  {
    
    
    key: '3',
    name: 'Joe Black',
    chinese: 98,
    math: 90,
    english: 70,
  },
  {
    
    
    key: '4',
    name: 'Jim Red',
    chinese: 88,
    math: 99,
    english: 89,
  },
];

function onChange(pagination, filters, sorter, extra) {
    
    
  console.log('params', pagination, filters, sorter, extra);
}

ReactDOM.render(<Table columns={
    
    columns} dataSource={
    
    data} onChange={
    
    onChange} />, mountNode);