美文网首页
table行内上传

table行内上传

作者: 艾希_可可 | 来源:发表于2020-03-27 17:51 被阅读0次

1、样式
<Table :columns="columnsFile" :data="fileList" ref="table" class="table"></Table>

2、数据

    columnsFile: [
                    {
                    title: '行号',
                    key: 'id',
                    width: 60,
                    render: (h, params) => {
                        return params.index + 1
                    }
                },
                    {
                        title: '操作',
                        key: 'id',
                        width: 300,
                        render: (h, params) => {

                            let arr = []
                            arr.push(h('i-button', {
                                props: {
                                    icon: 'ios-cloud-upload-outline',
                                    size: 'small',
                                    type: 'primary'
                                },
                                style: {
                                    position: 'relative',
                                },
                                on: {
                                    click: () => {
                                        this.filetype = params.index
                                    }
                                }
                            }, '上传'))
                            return h('Upload', {
                                props: {
                                    headers: this.headers,
                                    action: "https://test.51xyb.cn/fdd/api/incomes/annex/add",
                                    data: this.UploadParams,
                                    'show-upload-list': false,
                                    format: this.fileformat,
                                    'on-success': this.handleSuccess,
                                    'on-format-error': this.handleFormatError,
                                    'max-size': '51200',
                                    'on-exceeded-size': this.handleMaxSize,
                                    'before-upload': this.handleBeforeUpload,
                                    'on-progress': this.handleprogress,
                                    'on-remove': this.handleremove
                                },

                                type: {
                                    size: 'small',
                                    type: 'primary'
                                },
                            }, arr);
                        }
                    },
                    {
                        title: '材料名称',
                        key: 'name',
                    },
                    {
                        title: '份数',
                        key: 'num',
                        render: (h, params) => {
                            if(params.index==0){
                                return this.fileList0.length
                            }else if(params.index==1){
                                return this.fileList1.length
                            }else if(params.index==2){
                                return this.fileList2.length
                            }else if(params.index==3){
                                return this.fileList3.length
                            }
                        }
                    }
                ],

3、JS

 handleSuccess(res, file) {
                console.log(res)
                console.log(this.uploadList)

                if (res.code != 200) {
                    this.$Message.warning(file.name + ':' + res.msg)
                    this.$refs.upload.clearFiles()
                    return
                }
                this.$Message.success(file.name + '上传成功')
                this.getAnnexList()
            },
            handleFormatError(file) {
                this.upload_loadding = false
                this.$Message.warning('不支持的格式,请重新上传。');
                return false
            },
            handleMaxSize(file) {
                this.upload_loadding = false
                this.$Message.success('不能超过50M,请重新上传');
                return false
            },
            handleBeforeUpload(file) {
                const check = 1 < 20;
                if (!check) {
                    this.$Message.warning('一次最多只能上传1份文件。');
                }
                this.UploadParams.file = file;
                this.UploadParams.type = this.filetype;
                //0个人1抵押
                this.UploadParams.category = 3;
                this.UploadParams.inOrderNo = this.inOrderNo;
                console.log('上传参数')
                console.log(this.UploadParams)
                return check;
            },
            handleprogress(file, fileList) {
                this.upload_loadding = true
            },
            handleremove(file) {
                console.log('=======移除时的文件名' + file.name + '列表' + this.uploadList.length)
            },
``

computed: {
uploadList() {
return this.refs.upload ? this.refs.upload.fileList : [];
}
,
UploadUrl() {
return 'https://test.51xyb.cn/fdd/api/incomes/annex/add';
// return this.base.obj.onlinedomainUrl + '/legalcase/case/manage/uploadFile';

        }
    }

相关文章

网友评论

      本文标题:table行内上传

      本文链接:https://www.haomeiwen.com/subject/xylruhtx.html