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' ? (
) : (
{
getFieldDecorator(dataIndex, {
rules: [ {
required: dataIndex === 'courseName', max: dataIndex === 'courseName' ? 20 : 2, message: `${
title}限${
len}字内!`, }, ], initialValue: record[dataIndex], }) (this.getInput())}
)}
) : ( children )} ); };
需要注意的是:下拉选择框的默认值一定要对应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}
) }
  • 上面分别使用到组件通信的onRefref。 关于两个的用法,大家可以自行搜索。
  • 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:react中函数带()和不带()引发的问题
下一篇:react中使用splice函数去删除数组的某一项

发表评论

最新留言

很好
[***.229.124.182]2024年03月01日 17时25分25秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

linux中卸载ambri-servle,Kerberos 命令使用 2019-04-21
linux二进制反编译,Xori:一款来自BlackHat 2018的二进制反汇编和静态分析工具 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
java++记录+运行_记录java+testng运行selenium(三)---xml、ini、excel、日志等配置 2019-04-21
mysql居左查询abcd_MySql速查手册 2019-04-21
loadrunner 错误: 无法找到 java.exe_LoadRunner错误及解决方法总结 2019-04-21
Java小魔女芭芭拉_沉迷蘑菇不可自拔,黏土人《小魔女学园》苏西·曼芭芭拉 图赏... 2019-04-21
php+mysql记事本_一个简单记事本php操作mysql辅助类创建 2019-04-21
300小时成为java程序员_直击面试现场: Java程序员3轮6小时面试, 成功拿到阿里offer!... 2019-04-21
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台 2019-04-21
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码 2019-04-21
角标越界 Java_【新人求助】利用占位符操作数据库是总是提示数组角标越界是怎么回事 - Java论坛 - 51CTO技术论坛_中国领先的IT技术社区... 2019-04-21
java类中声明log对象_用于Android环境,java环境的log打印,可打印任何类型数据 2019-04-21
db2与mysql编目_DB2编目、联邦数据库 - Goopand's OS Space - OSCHINA - 中文开源技术交流社区... 2019-04-21
atomikosdatasourcebean mysql_SpringBoot2整合JTA组件实现多数据源事务管理 2019-04-21
webpack 入口文件 php,如何实现webpack多入口文件打包配置 2019-04-21