博客

需求是：

用table展示数据，并在每一行的最后一列中给一个上传附件的按钮，可上传多个附件，上传之后在另一列去显示数据，可以删除附件

因为有别的组件用到columns，他不需要上传附件功能，我就把columns的公共部分提出去了，在这个组件需要的时候在push到column中。

columns如下：

 /**
     * 处理上传附件列
     */
    handleColumn = () => {
        let cArr = this.state.columns;
        if (cArr.length == 19) {
            cArr.push({
                title: '上传附件',
                dataIndex: 'uploadAnnex',
                key: 'uploadAnnex',
                width: 100,
                fixed: 'right',
                render: (text, record, index) => (
                    <span>
                        <Upload accept=".pdf" showUploadList={false} customRequest={() => this.uploadAnn(text, record, index)} >
                            <button type="button" style={{border:'none',background:'#e0e0e0',color:'#666'}} data-title="上传附件" >
                                上传附件
                            </button>
                        </Upload>
                    </span>
                ),
            }, {
                title: '文件',
                dataIndex: 'annex',
                key: 'annex',
                width: 200,
                fixed: 'right',
                render: (text, record, index) => (
                    record.annex.map((item, i) => (
                        <div key={i} style={{ marginTop: '5px', marginBottom: '5px' }}>
                            <a href={item.link}>{item.name}</a>
                            <Tag color="#771f1a" style={{ marginLeft: '10px' }} onClick={() => this.handleDelete(index, i)}>X</Tag>
                        </div>
                    ))
                ),
            })
        }
        this.setState({ columns: cArr });
    }

上传和删除调用其对应的接口进行处理就好，前端逻辑处理如下

    /**
     * 上传附件
     */
    uploadAnn = (text, record, index) => {
        const { data } = this.state;
        data[index].annex.push({ link: 'www', name: '1' })
        this.setState({
            data,
        });
    }

    /**
     * 删除附件
     */
    handleDelete = (index, i) => {
        console.log(index);
        const { data } = this.state;
        const newData = [...data];
        newData[index].annex.splice(i, 1)
        this.setState({
            data: newData,
        });
    }