VUE Table格式化数据

VUE Table格式化数据

---

前言

当table里面的数据是数字时需要对数字进行相应的格式，比如日期、金额

一、定义相关函数

代码如下：
1、dataFormat：保留两位小数并显示千分位分隔符
2、dataFormatRate保留两位小数并添加百分数
3、格式化日期

    dataFormat(text){
      if(text!=null){
        return Number(text.toFixed(2)).toLocaleString()
      }
    },
    dataFormatRate(text){
      if(text!=null){
        return Number(text*100).toFixed(2) + '%'
      }
    },
    timeFormat(text){
      if(text!=null){
        return moment(text).format('YYYY-MM-DD')
      }
    },

二、使用customRender格式化

使用customRender，在columns下对用的title下调用上面相关方法即可

代码如下（示例）：

      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '******',
          align: 'center',
          dataIndex: 'TECHNOLOGY_PS_SJ',
          sorter: (a, b) => a.TECHNOLOGY_PS_SJ - b.TECHNOLOGY_PS_SJ,
          customRender:(TECHNOLOGY_PS_SJ) =>{
            return this.dataFormat(TECHNOLOGY_PS_SJ)
          }
        },
        {
          title: '******',
          align: 'center',
          dataIndex: 'TECHNOLOGY_PS_RATE',
          sorter: (a, b) => a.TECHNOLOGY_PS_RATE - b.TECHNOLOGY_PS_RATE,
          customRender:(TECHNOLOGY_PS_RATE) =>{
            return this.dataFormatRate(TECHNOLOGY_PS_RATE)
          }
        },
      ],

总结

记录一下，方便后续查看