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屬性傳入調用的方法名，就會在初始化表格的時候調用這個方法轉換顯示的數據了。

效果圖如下：