react + antdesign入门(二) 编辑表格数据,将数据回显到表单内

最新推荐文章于 2024-08-03 17:05:14 发布

爱倒腾

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量3.2k

点赞数

分类专栏： # React + AntDesign 学习总结文章标签： react javascript jsx

本文链接：https://blog.csdn.net/weixin_44514665/article/details/113786796

版权

运行结果:

在这里插入图片描述

表格组件 TableList.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