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"));

 

结果: