vue+element 表格数据进行转换、处理，如日期格式化，状态码转换

表格日期格式化

将后台返回的时间戳转换成格式化年月日日期，在表格中显示

<el-table-column align="center"
                           prop="time"
                           :formatter="dateFormat"
                           label="时间"
                           :resizable="false">
          </el-table-column>

:formatter属性绑定自定义格式化方法  dateFormat(row, colum, cellValue, index),

dateFormat(row, colum, cellValue, index) {
        return UTIL.formatDateTime(cellValue * 1000);
  }

UTIL.formatDateTime中是工具类里是时间格式化方法。

//时间戳转换成日期
  formatDateTime(inputTime, mode) {
    var date = new Date(inputTime);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    return mode == undefined ? y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second : y + '-' + m + '-' + d + ' ' + h + ':' + minute;
  }

根据状态码显示不同状态，该方法里是使用的表格组件，不是表格组件的和上述日期格式化方法相同

方法一：在数据渲染时使用循环，根据返回状态码不同进行赋值

if (result.code) return;
          for (let i = 0; i < result.data.length; i++) {
          
            result.data[i].shipping = result.data[i].shipping == 1 ? '海运' : result.data[i].shipping == 2 ? '空运' : '';

          }

方法二：在<el-table-column>标签中绑定属性    :formatter="item.formatter"

<el-table :data="tableList" style="width: 100%" border :cell-style="cellStyle">
        <template v-for="(item,index) in columns">
          <el-table-column :prop="item.prop" :key='item.label' :label="item.label" :align="item.align"
                           :width="item.width" :resizable="false" :formatter="item.formatter"></el-table-column>
        </template>
        <el-table-column label="操作" align="center">

        </el-table-column>
      </el-table>

data() {
      let format = this;
      return 
        columns: [
           {
            prop: 'shipping',
            width: '100',
            label: '运输方式',
            align: 'center',
            formatter: format.formatShipper
          },
        ],
      }
    },

在methods中写方法 

formatShipper(row, colum, cellValue, index) {
        if (cellValue === 1) return '海运';
        if (cellValue === 2) return '空运';
      },

方法二也可以为当前单元格增改属性。

个人推荐使用方法二

前端小菜鸟，如有不正确的地方，欢迎指出。