Iview table、上传文件等问题-CSDN博客

iview中table没有给出直接的合并行和列的方法解决办法：render函数=======代码如下：

columns9: [
            {
              title:`process,sourceEnvVersion/compileTime(${this.sourceEnv}),targetEnvVersion/compileTime(${this.targetEnv})`,  
              key: 'total',
              align: 'center',
              renderHeader: (h, params) => {
                    return h('div', [
                        h('span',{
                            style: {
                                height: '33px',
                                lineHeight: '33px',
                                display: 'inline-block',
                                margin: '0 auto',
                                width: '250px',
                                
                                textAlign: 'left'
                            }
                        },'进程'),
                        h('span', {
                            style: {
                                height: '33px',
                                lineHeight: '33px',
                                display: 'inline-block',
                                margin: '0 auto',
                                width: '389px',
                                
                                textAlign: 'left',
                                marginLeft: '11px'
                            }
                        }, `源环境/时间(${this.sourceEnv})`),
                        
                        h('span', {
                            style: {
                                height: '33px',
                                lineHeight: '33px',
                                display: 'inline-block',
                                margin: '0 auto',
                                width: '389px',
                                textAlign: 'left',
                                marginLeft: '11px'
                            }
                        }, `目标环境/时间(${this.targetEnv})`)
                    ])
                },
                render: (h, params) => {
                        if (params.row.total.includes(',')) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        height: '33px',
                                        lineHeight: '33px',
                                        display: 'inline-block',
                                        margin: '0 auto',
                                        width: '250px',
                                        textAlign: 'left',
                                        borderRight: '1px solid #808695'
                                    }
                                }, params.row.total.split(',')[0]),
                                
                                h('span', {
                                style: {
                                    lineHeight: '33px',
                                    display: 'inline-block',
                                    margin: '0 auto',
                                    width: '389px',
                                    height: '33px',
                                    borderRight: '1px solid #808695',
                                    textAlign: 'left',
                                    marginLeft: '11px'
                                }
                                },  params.row.total.split(',')[1]),
                                
                                h('span', {
                                style: {
                                    height: '33px',
                                    lineHeight: '33px',
                                    display: 'inline-block',
                                    margin: '0 auto',
                                    width: '389px',
                                    textAlign: 'left',
                                    marginLeft: '11px'
                                }
                                },  params.row.total.split(',')[2])
                            ])
                        } else {
                            return h('span',{
                                style: {
                                    textAlign: 'left',
                                    marginLeft: '-11px'
                                }
                            }, params.row.total)
                        }
                    }
                }
            ],
复制代码

注意：一般如果用renderHeader的话是不需要定义title的。但如果导出的话头部显示的是key值所以还是要定义title。title里参数获取在创建实例的时候就获取了，所以一般是undefined，并且也不会动态进行改变。如果要上传文件的话title里需要传入对应参数的话需要在上传之前手动改变title。

iview中上传文件，需要二次确认的解决办法：

        <Upload class="upload-container"
            multiple
            type="drag"
            :on-success="uploadSucess"
            :before-upload="uploadBefore"
            :on-error="uploadError"
            :data="{'env':targetEnv}"
            action="接口地址">
            <div style="padding: 20px 0;">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>导入目标文件</p>
            </div>
        </Upload>
复制代码

js:

        uploadSucess(response) {//上传成功钩子
                console.log(response)
                if(response.msg == '上传成功') {
                    this.$Message.success('导入成功')
                }else {
                    this.$Message.error(response.msg)
                }
            },
            uploadError() {//失败
                this.$Message.error('导入失败')
            },
            uploadBefore(file) {//上传前钩子
                return new Promise((resolve,reject) => {
                    this.$Modal.confirm({
                        title:'确认窗口',
                        content:`<p>目标环境：${this.targetEnv}</p><p>文件名：${file.name}</p>`,
                        onOk:() => {
                            resolve()
                        },
                        onCancel:() => {
                            reject()
                        }
                    })
                })
            }
复制代码