全国服务热线:4008-888-888

公司新闻

如何自制外卖小程序_在antd Table中刺进可修改的单

在antd Table中插入可编辑的单元格实例       这篇文章主要介绍了在antd Table中插入可编辑的单元格实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

实现如下图所示需求:

实现功能说明:

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

在构造函数内定义:

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

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

在render()中定义:

const { form: { getFieldDecorator },dataSource } = this.pro凡科抠图

在return中添加如下代码:

 div 
 /Form 
 Form.Item 
 Table 
 columns={[
 { title: '名称1', dataIndex: 'name1',render: (text, record, index) = 
 Form.Item key={index} 
 {getFieldDecorator(`tableDt[${index}].name1`)(
 Input placeholder="请输入名称1" / 
 /Form.Item 
 { title: '名称2', dataIndex: 'name2',render: (text, record, index) = 
 Form.Item key={index} 
 {getFieldDecorator(`tableDt[${index}].name2`)(
 Input placeholder="请输入名称2" / 
 /Form.Item 
 { title: '名称3', dataIndex: 'name3',render: (text, record, index) = 
 Form.Item key={index} 
 {getFieldDecorator(`tableDt[${index}].name3`)(
 Input placeholder="请输入名称3" / 
 /Form.Item 
 dataSource={this.state.dataSource}
 pagination={false}
 /Form.Item 
 /Form 
 Row gutter={16} 
 Col span={24} 
 Button this.save } type="primary" 提交 /Button 
 Button this.toback } 返回 /Button 
 span className="ti凡科抠图" {this.state.saveTipCont} /span 
 /Col 
 /Row 
 /div 

点击添加行按钮的操作方法:

//添加应用信息化查询方法行
handleRowAdd = () = {
 const { count, dataSource } = this.state;
 const newData = {
 key: count,
 name1: '',
 name2: '',
 name3: '',
 this.setState({
 dataSource: [...dataSource, newData],
 count: count + 1,

点击提交操作的方法:

save = () = {
 //处理校验值
 this.pro凡科抠图.form.validateFields((err, values) = {
 // console.log(values)
 if(!err){
 // values.tableDt就是个表格数据的数组,可对获取的值进行处理校验处理
}

实现效果如下:

value.tableDt值如下:

以上这篇在antd Table中插入可编辑的单元格实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服