react + antdesign入門(一) 渲染資料到表格

前言

本文基于了解過jsx 文法以及 React 的基本使用規範的前提編寫. 涉及到的相關文法就不過多的解釋了哈 =.=

渲染表格的 table.js 頁面

import { Table, Space, Button } from "antd";
import { Component } from "react";


const tableList = [
    {
        key: "1",
        name: "胡彥斌",
        age: 32,
        sex: "0",
        address: "西湖區湖底公園1号",
        like: ["唱歌", "跳舞"]
    },
    {
        key: "2",
        name: "胡彥祖",
        age: 42,
        sex: "0",
        address: "西湖區湖底公園1号",
        like: ["跳舞"]
    }
];

export default class TableList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false, // 控制彈窗的顯隐
            editData: {} // 彈窗的資料
        };
    }
    getColumns() {
        let self = this;
        return [
            {
                title: "姓名",
                dataIndex: "name",
                key: "name"
            },
            {
                title: "年齡",
                dataIndex: "age",
                key: "age"
            },
            {
                title: "住址",
                dataIndex: "address",
                key: "address"
            },
            //  操作列
            {
                title: "Action",
                key: "action",
                render: (text, record) => (
                    <Space size="middle">
                        <Button
                            type="primary"
                            onClick={() => {
                                self.edit(record);
                            }}>
                            編輯
                        </Button>
                        <Button
                            type="danger"
                            onClick={() => {
                                self.delete(record.key);
                            }}>
                            删除
                        </Button>
                    </Space>
                )
            }
        ];
    }
    // 編輯
    edit(data) {
        console.log("編輯", data);
        this.setState({
            visible: true,
            editData: data
        });
    }
    // 删除
    delete() {
        console.log("删除");
    }
    render() {
        return (
            <>
                <Table dataSource={tableList} columns={this.getColumns()} />
            </>
        );
    }
}
           

項目入口檔案 index.js

import React from "react";
import ReactDOM from "react-dom";
import TableList from "./views/about/about";

import "./index.css";

ReactDOM.render(<TableList  />, document.getElementById("root"));
           

結果: