データテーブルなしの単純な実装
小编是 React 初学者，都是基础知识~大佬们可以跳过hh
最初に効果を確認します（インターフェースデータが呼び出されないときの初期状態）
フォームの使用でreact +antd + ts借りて、書かれたコンポーネントをantdtable
ファイルディレクトリ（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>
)
}
成分分析
ツールチップ（https://ant-design.gitee.io/components/tooltip-cn/#header）
コードデモ：（公式サイトの1つ）
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）
コードデモ：（公式サイトの1つ）
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,
);
テーブル（https://ant-design.gitee.io/components/table-cn/#header）
一部の属性については、公式ウェブサイトの例を参照してください。タイトルのURLは次のとおりです：
-
テーブル
-
カラム
コードデモ：（公式サイトの1つ）
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);
