react+antdesign实现Table的增、删、改的示例代码_antdesigntable源码

78 浏览量更新于2023-05-04 收藏 62KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

react+ant design实现实现Table的增、删、改的示例代码的增、删、改的示例代码

本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增

加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言，

1、main.jsx

import React from 'react';

import ReactDom from 'react-dom';

import ExampleTable from './ExampleTable.jsx'

ReactDom.render(

<ExampleTable/>,

document.getElementById('AppRoot')

);

2、ExampleTable.jsx, 注：记住引入antd.css，否则Table组件无法正常显示。

import React from 'react';

import { Table,Button,Input,Icon,Popconfirm,Alert } from 'antd';

import AddUser from './AddUser.jsx'

import UserDetails from './UserDetails.jsx'

class ExampleTable extends React.Component {

constructor(props) {// 构造函数

super(props);

this.state = {

dataSource:[

{ key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},

{ key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},

{ key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},

{ key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},

{ key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'}

index : '',

PersonCount :0,

selectedRowKeys:[],

selectedRows:[],

record : 'abc'

};

this.onDelete = this.onDelete.bind(this);//绑定this,声明该方法需要绑定this, 直接在onClick中调用

this.appendPerson = this.appendPerson.bind(this);

this.handleSelectedDelete = this.handleSelectedDelete.bind(this);

this.columns = [

{ title: '编号', dataIndex: 'nid', key: 'nid' ,width:'8%'},

{ title: '姓名', dataIndex: 'name', key: 'name' ,width:'15%'},

{ title: '性别', dataIndex: 'gender', key: 'gender' ,width:'10%'},

{ title: '年龄', dataIndex: 'age', key: 'age',width:'15%', },//render: (text, record, index) => (Math.floor(record.age/10))*10+"多

岁"},

{ title: '学校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },

{ title: '在校表现', dataIndex: 'description', key: 'description' ,width:'20%'},

{ title: '操作', dataIndex: '', key: 'operation', width:'32%',render: (text,record,index)=>(

<span>

</Popconfirm>

</span>

) },

];

}

appendPerson(event){//得到子元素传过来的值

let array = [];

let count = 0;

this.state.dataSource.forEach(function (element) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38711110

粉丝: 5
资源: 933

会员权益专享

react+ant design实现Table的增、删、改的示例代码

会员权益专享

最新资源

react+ant design实现Table的增、删、改的示例代码

react-hook-and-antd-table:React钩和蚂蚁表

pro-table:Ant像Pro一样使用Ant Design Table！

antd可伸缩列源码.zip

帮我用react+antdesign实现一个表格嵌套两层表格的效果

帮我用react+antdesign实现一个表格嵌套两层表格的效果，以class MonitorList extends React.Component命名

以class MonitorList extends React.Component命名，帮我用react+antdesign实现一个表格嵌套两层表格的效果，每个表格只要一行数据

通过 react + ant-d 实现一个用户管理功能

ant design table 请求 渲染 代码示例

react实现 antdesign table表格导出 excel表格功能

用react hooks+typescript结合antdesign封装一个表格table组件，具体功能有增删改查，实现表格联动

循环与table结合，列出多个table,并给出代码，react结合antdesign

react antdesign 实现table组件 外全选取消全选表格的选项

ant design table 请求数据 渲染 代码示例

react 怎么修改antdesign 中table columns 的title样式

react ant中table的展开

react antdesign在table 表格外添加一个复选框 实现全选或取消全选

antdesign table 多选checkbox循环

react antdesign 怎么把table里边点击某一项按钮把当前行内容获取到

antdesign table组件如何增加一行

react+antd表格操作列加dropdown和menu写法

会员权益专享

最新资源

ant design table 请求渲染代码示例

react antdesign 实现table组件外全选取消全选表格的选项

ant design table 请求数据渲染代码示例

react antdesign在table 表格外添加一个复选框实现全选或取消全选