列表附件添加自定义列

场景描述

在列表形式的附件中增加列，输入值存储到附件的json数组中

实现思路

在附件组件的表格列渲染事件中，添加列，列中添加输入框组件，输入框的value属性绑定json的key，在输入框的onChange事件中将值写入json

实现步骤

例如在附件中增加版本号列，存入json的version中

    onUpload0TableColumnRender = (event) => {
        let {detail:{tableColumns}} = event;

        //获取数据集中附件列中的数据
        var data = this.comp("restData0");
        var filesStr = data.getValue("files");
        if(!filesStr){
            return;
        }
        //转为json数组
        let files = JSON.parse(filesStr);
        //定义一个新的列
        let col1 ={
            title: '版本号',
            ellipsis: {
                showTitle: true,
            },
            render: (file,record,index) => (
                <Input placeholder="请输入版本号" value={file.version} onChange={(value)=>{
                    //遍历json数组，参数file是当前文件的json，和数据中的storeFileName对比，找到当前文件的json对象，将输入框中的值写入json对象
                    for(let oneFile of files){
                        if(oneFile.storeFileName == file.storeFileName){
                            oneFile.version = value.target.value;
                        }
                    }
                    //保存到数据集
                    data.setValue("files",JSON.stringify(files));
                }}/>
            )
        };
        //加入到表格中
        tableColumns.push(col1);
    }

注意需要添加如下引用：

import React from 'react';
import { Input} from 'antd';