ElementUI动态表格数据转换formatter

elementUI的表格初始化比较简单，声明prop值对应的字段名即可。

而在实际应用中，我们常常有这种需求：从服务器获取的数据并不是我们要显示的最终结果，涉及一些状态、类型、日期时间等的转换，这时候我们就需要用elementUI表格组件的formatter属性，来进行数据转换了。

以下给出一个例子，很是简单明了，代码如下：

<template>
  <el-table ref="myTable" :data="tableData" stripe style="width: 100%">
    <el-table-column align="center" prop="userName" label="用户名" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="mobilePhone" label="联系方式" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="company" label="公司所属" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="time" :formatter="dateFormatter" label="入职日期" width="100"></el-table-column>
    <el-table-column align="center" prop="remark" label="备注" width="100" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="status" :formatter="statusFormatter" label="禁用" width="100"></el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {id: 1, userName: '张三', mobilePhone: 15812356789, company: '某某软件有限公司', time: 1535379319240, remark: '备注信息', status: 0},
          {id: 2, userName: '李四', mobilePhone: 15812356666, company: '某某软件有限公司', time: 1535479319240, remark: '备注信息', status: 0},
          {id: 3, userName: '王五', mobilePhone: 15812357777, company: '某某软件有限公司', time: 1535579319240, remark: '备注信息', status: 0},
          {id: 4, userName: 'Lena', mobilePhone: 15812358888, company: '某某软件有限公司', time: 1535679319240, remark: '备注信息', status: 0},
          {id: 5, userName: 'Sally', mobilePhone: 15812359999, company: '某某软件有限公司', time: 1535779319240, remark: '备注信息', status: 1},
          {id: 6, userName: 'Thomas', mobilePhone: 15812357788, company: '某某软件有限公司', time: 1535879319240, remark: '备注信息', status: 1}
        ]
      }
    },
    methods: {
      // 日期格式化
      dateFormatter (row, column) {
        let datetime = row.time;
        if(datetime){
          datetime = new Date(datetime);
          let y = datetime.getFullYear() + '-';
          let mon = datetime.getMonth()+1 + '-';
          let d = datetime.getDate();
          return y + mon + d;
        }
        return ''
      },
      // 禁用状态格式化
      statusFormatter(row, column) {
        let status = row.status;
        if(status === 0){
          return '否'
        } else {
          return '是'
        }
      }
    }
  }
</script>

 

 

给formatter属性传入调用的方法名，就会在初始化表格的时候调用这个方法转换显示的数据了。

效果图如下：