网站地图    收藏   

子栏目

主页 > 前端 > vue教程 >

在antd Table中插入可编辑的单元格实例

来源：自学PHP网    时间：2020-10-28 13:44 作者：小飞侠 阅读:次

[导读] 在antd Table中插入可编辑的单元格实例...

今天带来在antd Table中插入可编辑的单元格实例教程详解

最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。

实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图

补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据

实现如下图所示需求：

实现功能说明：

点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据

在构造函数内定义：

constructor(props) {
 super(props)
 this.state = {
  dataSource:[{
   key: 0,
   name1: '',
   name2: '',
   name3: '',
  }],//应用信息化查询方法
  count:1,//总数
 }
}

注：如果dataSource定义为空数组，则页面初始化时表格没有输入框，需要点击添加行，如下图

在render()中定义：

const { form: { getFieldDecorator },dataSource } = this.props

在return中添加如下代码：




   
       {getFieldDecorator(`tableDt[${index}].name1`)(
         
       )}
      
     },
     { title: '名称2', dataIndex: 'name2',render: (text, record, index) => 
      
       {getFieldDecorator(`tableDt[${index}].name2`)(
         
       )}
      
     },
     { title: '名称3', dataIndex: 'name3',render: (text, record, index) => 
      
       {getFieldDecorator(`tableDt[${index}].name3`)(
         
       )}
      
     },
    ]}
    dataSource={this.state.dataSource}
    pagination={false}
   />
  
  {this.state.saveTipCont}
点击添加行按钮的操作方法：


//添加应用信息化查询方法行

handleRowAdd = () => {
 const { count, dataSource } = this.state;
 const newData = {
  key: count,
  name1: '',
  name2: '',
  name3: '',
 };
 this.setState({
  dataSource: [...dataSource, newData],
  count: count + 1,
 });
}



点击提交操作的方法：


//保存
save = () => {
 //处理校验值
 this.props.form.validateFields((err, values) => {
  // console.log(values)
  if(!err){
   // values.tableDt就是个表格数据的数组，可对获取的值进行处理校验处理
  }
 })
}


实现效果如下：
value.tableDt值如下：
以上这篇在antd Table中插入可编辑的单元格实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持自学php网。

以上就是关于在antd Table中插入可编辑的单元格实例全部内容,感谢大家支持自学php网。
                    
                    
 
      

 
 
   
   
   
  
 












                
            
        
 
          
          
    
          
          
 

              
        


        

            

                
最新评论

                

                
    
                
    
                    加载更多~~
                
    
                
    
            
    
            
            
    
                
    添加评论
    
                
    
                    
    
                  
                        
                        
    
                        
    
                        
                    
                
    
                
    
                    
                
    
            
    
            

        
    

        
    
            
    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论