vue+elementUI开发实践问题总结(三)

• 如何让dialog在每次显示的时候初始化呢？在el-dialog下需要重新渲染的组件添加:key属性,然后传入一个随机数,当取消或者确定时执行的事件中重置这个随机数.这样每次点开的dialog都是重新渲染的.data都是原始值。我是让key值为时间戳了。也可以加v-if，值和visible.sync绑定的值一致就行
• 表格中某一列时间戳格式化方式

<el-table-column align="center" prop="updateTime" label="更新时间" :formatter="formatTime" show-overflow-tooltip></el-table-column>

formatTime(row, column){
  return this.getTimeFormat(row[column.property]);
}
getTimeFormat(timestamp) {
    if (timestamp && (typeof timestamp) === 'number') {
        var time = new Date(timestamp);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        return year + '-' + this.add0(month) + '-' + this.add0(date) + ' ' + this.add0(hours) + ':' + this.add0(minutes) + ':' + this.add0(seconds);
    } else {
        return '';
    }

}

对于不同的列内容可以采用类似方式进行格式化。

• 页面中需要执行导出。vue中绑定方法，方式如下，我们项目中会区分导出txt和pdf格式的文件，所以我对导出格式做了判断

this.$http.get(URL,{responseType: 'arraybuffer'}).then(res => {
        this.download(res.data,'txt');//导出txt
      },res => {
        this.$message({
            message: '导出失败!',
            type: 'error'
        });
      });
download (data,exportType) {
      if (!data) {
        return
      }
      let exportGs='';
      if(exportType==='txt'){
        exportGs='text/plain';
      }else if(exportType==='pdf'){
        exportGs='application/pdf';
      }
      let url = window.URL.createObjectURL(new Blob([data],{type: exportGs}));
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url;
      link.setAttribute('download', '文件');
      document.body.appendChild(link)
      link.click();
    }

目前遗留问题，导出txt文件格式正常，导出pdf文件内容是空，没有写入内容，正在解决中，哪位大佬如果遇到过类似问题，知道解决办法请告知，不胜感激。

• 对使用axios传输数据方式总结如下：
  1.使用get方法。

//假设axios已经可以通过this.$http方式调用,queryStr是后台接收的名称，queStr是传递给后台的值
this.$http.get(URL,{params:{"queryStr":queStr}}).then(res => {
        console.log(`返回信息${res.data}`);
      },res => {
        console.log(`错误信息${res.data}`);
      });

2.使用post方法。

let newServiceObj={
    "id":xxxxx
}
//可以传递一个对象
this.$http.post(URL,newServiceObj).then(res => {
    console.log(`返回信息${res.data}`);
    }, res => {
    console.log(`返回信息${res.data}`);
});

3.使用put方法

let params=new URLSearchParams();
params.append("relatedIdsList",XXX);
params.append("servicesId",XXX);
this.$http.put(URL,params).then(res => {
  console.log(`返回信息${res.data}`);
}, res => {
  console.log(`返回信息${res.data}`);
});

4.使用delete方法

this.$http.delete(URL+'?processInstIds='+XXX).then(res => {
    console.log(`返回信息${res.data}`);
}, res => {
    console.log(`返回信息${res.data}`);
});

历时一个多月的项目终于告一段落，谨以三篇文章记录一个月来的开发中遇到的问题，便于日后回顾，也为别人提供一点力所能及的帮助。