vue开发中经常使用的代码片段

vue开发中高频次使用到的一些代码片段，方便以后ctrl+C ctrl+v。

请注意，文中代码并不能直接无脑CV，有些只是示例代码，需要结合自己需求进行个性化修改。

第一，导出文件

一个导出excel的例子。

// 第一： vue 内部方法

exportExcel () {
    requestExport(id).then(res => {
        // 注意这个地方的type 根据需要导出文件的类型填写
        const href = window.URL.createObjectURL(new Blob([res.data], {type: xxxxx}));
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = href;
        // 这里的文件名 后台数据中返回 就取出来，否则就写一个固定名称就可以
        let contentDisposition = decodeURI(res.headers['content-disposition']);
        let filename = contentDisposition .substring(contentDisposition.indexOf('=') + 1).trim().replace("utf-8''", '');
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }).catch(err => {
        console.log('导出报错', err);
    })
}



// 第二： 接口 注意 responseType要为blob。
export function requestExport (id) {
    return axios({
        url: 'xxx',
        method: 'get',
        responseType: 'blob' // 很重要
    })
}


// 第三：如果封装了axios，需要再响应拦截中返回整个response。
// 如果是二进制数据 需要整日返回 response
if (res.requset.responseType == 'blob' || res.requset.responseType == 'arrayBuffer') {
    return res;
}

第二，文件上传

一个上传图片和视频的例子。

// 第一：el-upload 上传

  
  
只能上传图片和视频文件，且不超过10MB
  

    
    
    
        
            
        
        
            
        
    
  


// 图片视频预览

    
    



// 第二：上传方法
handlePictureCardPreview (file) {
    if (图片) {
        this.showIMG = true;
    } else {
        this.showIMG = false;
    }
    this.dialogImageUrl = file.url;
    this.imgdialogVisible = true;
},


// 上传图片
submitImgs () {
    // 判断格式和尺寸是否符合需求
    const FORMAT = this.$refs.imgUpload.uploadFiles.every(item => [.png, .jpg, .jpeg, .gif, .bmp, .mp4, .avi].includes(item.name.slice(item.name.indexOf('.'))))
    if (!FORMAT) {
        this.$message({
            type: 'warning',
            message: '格式不对'
        })
        this.$refs.imgUpload.clearFiles();
        return
    }

    const SIZE = this.$refs.imgUpload.uploadFiles.some(item => item.size > 1024 * 1024 * 10)

    if (SIZE) {
        this.$message({
            type: 'warning',
            message: '大小不能超出10MB'
        })
        this.$refs.imgUpload.clearFiles();
        return
    }

    let list = this.$refs.imgUpload.uploadFiles.map(item => item.raw);

    let formdata = new FormData();

    list.forEach(file => {
        formdata.append('fileList', file)
    })
    
    // 然后调用方法 传递formdata上传即可
    
},

第三，合并单元格

一个合并所有具有相同值列的例子。

// 第一：表格



// 第二: 表格方法
// 合并单元格函数
strategySpanMethod: function (
  { row, column, rowIndex, columnIndex },
  data
) {
  // data 就是从这里动态传过来的, column.property是表头的key
  var spanArr = this.getSpanArr(data, column.property);
  const _row = spanArr[rowIndex];
  const _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col,
  };
},


// 处理合并行的数据
getSpanArr(data, spanKey) {
  var spanArr = [];
  var pos = "";
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }
  return spanArr;
},

第四，表格，分页，筛选

// 第一： 表格，分页和筛选

// 筛选


    
        
            
        
        
            
                                
                
            
        
    


// 表格


// 分页组件


// page组件封装

    

props: {
    total: {
        required: true,
        type: Number,
    },
    page: {
        
        type: Number,
        default: 1
    },
    limit: {
        default: 20
        type: Number,
    },
    pageSizes: {
        type: Array,
        default () {
            return [10, 20, 30, 50]
        }
    },
    pagerCount: {
        type: Number,
        default: document.body.clientWidth < 992 ? 5 : 7;
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    background: { 
        type: Boolean,
        default: true
    },
    hidden: {
        type: Boolean,
        default: false
   }
}

computed: {
    currentPage: {
        get () {
            return this.page
        },
        set (val) {
            this.$emit('update:page', val)
        },
    },
    pageSize: {
        get () {
            return this.limit
        },
        set (val) {
            this.$emit('update:limit', val)
        },
    }
},
handleSizeChange (val) {
    this.$eimt('pagination', {page: this.currentPage, limit: val})
},

handleCurrentChange (val) {
    this.$eimt('pagination', {page: val, limit: this.pageSIze})
},


// 第二：搜索和重置的方法
handleQuery () {
    this.getTableList();
}

handleReset () {
    this.filterForm = this.$options.data().filterForm;
    this.getTableList();
}

未完 待更新......