react-ant-design实现可拖拽可编辑的表格功能
发布日期:2021-05-20 10:06:53
浏览次数:33
分类:技术文章
本文共 3568 字,大约阅读时间需要 11 分钟。
1、 需求功能:表格可进行拖拽,点击编辑的时候可进行编辑,前两个是input输入框,后面是下拉选择框,可增加可删除。
下面我将介绍两种实现方法
一、
-
查看
当我需要拖拽的时候渲染拖拽表格,当我要编辑的时候渲染编辑表格,使用共同的数据即可。ant-design
组件的时候,会发现拖拽和可编辑表格是两种类型表格。所以我的实现思路是,为了避免两种类型表格杂在一起带来的不确定问题,所以直接引入两种表格,通过变量去控制区使用哪种表格。 -
具体实现代码因人而异,这里我只给出部分觉得可以帮助大家的代码
-
区分渲染编辑状态时是输入框还是下拉选择框
renderCell = ({ getFieldDecorator }) => { const { editing, dataIndex, title, inputType, record, index, children, ...restProps } = this.props; const len = dataIndex === 'courseName' ? 20 : 2; return ( { editing ? ({ inputType === 'select' ? ( ) : () : ( children )} ); };{ getFieldDecorator(dataIndex, { rules: [ { required: dataIndex === 'courseName', max: dataIndex === 'courseName' ? 20 : 2, message: `${ title}限${ len}字内!`, }, ], initialValue: record[dataIndex], }) (this.getInput())} )}
需要注意的是:下拉选择框的默认值一定要对应value值的数据类型,需要匹配。
二、首推这种方法
- 在同一组件中,使用变量去控制表格
render
的内容 - 示例
render: (text, record) => { return ({ editCourseId === record.courseId && editCourseId !== '' ? () }{ this.child = ref; }} value={ record.gradeEnumList} courseId={ editCourseId} /> ) : text}
render: (text, record) => { return ({ editCourseId === record.courseId && editCourseId !== '' ? () }) : text}
- 上面分别使用到组件通信的
onRef
、ref
。 关于两个的用法,大家可以自行搜索。 - 1、总结来说,onRef就是用来调用子组件的函数方法
- 这是我本次案例所使用的示例
父组件-----------------使用传入方式在上面渲染的地方代码在需要调用的地方进行调用子组件的方法 const gradeEnumList = this.child.getValue();子组件----------------- componentDidMount() { const { onRef } = this.props; if (onRef) { onRef(this); } } getValue = () => { const { value } = this.state; return value; }
- 2、:用来获取子组件的值,子组件进行修改变化的值在父组件中能够得到。
父组件-------------- this.editCourseName = React.createRef(); this.editShortName = React.createRef(); this.editGradeEnum = React.createRef(); 引入方式如上面渲染代码所示 父组件访问使用 const shortName = this.editShortName.current.state.value; const name = this.editCourseName.current.state.value;子组件--------------------------按自己正常的业务代码如--import React, { Component } from 'react';import { Input } from 'antd';class CustomInput extends Component{ constructor(props) { super(props); this.state = { value: props.value, } } onChange = (e) => { this.setState({ value: e.target.value, }); } render() { const { value } = this.state; const { max } = this.props; return }}export default CustomInput;
关于以上组件通信方式细节大家一定要自行学习,我这里只是分享一些代码片段,我的实现方式而已。
转载地址:https://blog.csdn.net/weixin_45416217/article/details/109445234 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年03月01日 17时25分25秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
linux中卸载ambri-servle,Kerberos 命令使用
2019-04-21
linux两台主机添加信任,Linux两台机器间添加信任,实现不用密码问,互传文件...
2019-04-21
linux 自动获取ssl证书,linux生成自验证ssl证书的具体命令和步骤
2019-04-21
linux基础命令20个,20-linux中基础命令
2019-04-21
重置网络配置 android,重置Android移动网络信号?
2019-04-21
java约瑟夫环pta上_cdoj525-猴子选大王 (约瑟夫环)
2019-04-21
mysql居左查询abcd_MySql速查手册
2019-04-21
Java小魔女芭芭拉_沉迷蘑菇不可自拔,黏土人《小魔女学园》苏西·曼芭芭拉 图赏...
2019-04-21
php+mysql记事本_一个简单记事本php操作mysql辅助类创建
2019-04-21
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台
2019-04-21
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码
2019-04-21
webpack 入口文件 php,如何实现webpack多入口文件打包配置
2019-04-21