el-table template 支持 formater

         <el-table
              v-loading="listLoading" row-key="id" :data="tableData"
              element-loading-text="正在加载中..."
              stripe fit highlight-current-row @selection-change="handleSelectionChange"
              :height="tableHeight">
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableHead'
                               :label="value.title" :prop="value.key" :formatter="value.formatter">
                <template slot-scope="scope">
                  <div v-if="value.key === 'orderCode'">
                    <el-popover
                      placement="bottom"
                      :width="230"
                      trigger="click"
                      :content="scope.row[value.key]">
                      <div slot="reference">{{scope.row[value.key].length>10?(scope.row[value.key].slice(0,10)+'...'):scope.row[value.key]}}</div>
                    </el-popover>
                  </div>
                  <!--主要下面这一段-->
                  <div v-else>{{formaterColumn(value.formatter,scope.row,scope.row[value.key])}}</div>
                </template>

              </el-table-column>
              <el-table-column label="操作"  fixed="right" align="center">
                <template slot-scope="scope">
                  <el-button  type="primary" size="mini" class="btn-edit" @click="dispatch(scope.row)">调度
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

现在看计算属性使用闭包
 

  computed:{
    formaterColumn(){
      return function(flag,row,val){
        return flag ? flag(row,null,val) : val
      }
    },
  },

下面是我的所有字段仅供参考

const defaultTableHead = [
  { key: 'code', title: '运输单号', width: '180px' },
  { key: 'orderCode', title: '运输订单号', width: '180px' },
  { key: 'sourceLocation', title: '起运地', width: '180px' },
  { key: 'destLocation', title: '目的地', width: '180px' },
  { key: 'startTime', title: '开始时间', width: '' ,formatter:formatTime},
  { key: 'endTime', title: '结束时间', width: '' ,formatter:formatTime},
  { key: 'num', title: '途经点个数', width: '' },
  { key: 'totalAmount', title: '预计取货总数量', width: '180px' },
  { key: 'totalVolume', title: '预计取货总体积(m3)', width: '180px' },
  { key: 'totalWeight', title: '预计取货总重量(t)', width: '180px' },
  { key: 'totalTrust', title: '预计取货总托数', width: '180px' },
  { key: 'model', title: '配载车型', width: '180px' },
  { key: 'node', title: '路由节点', width: '180px' },
  { key: 'driverName', title: '司机姓名', width: '' },
  { key: 'driverPhone', title: '司机手机号码', width: '' },
  { key: 'driverLicense', title: '车牌号', width: '' },
  { key: 'status', title: '运输状态', width: '' , formatter: val => {
      switch (val.status) {
        case 10:
          return '未调度'
        case 20:
          return '已调度'
        case 25:
          return '未接单'
        case 30:
          return '已接单'
        case 40:
          return '已提货'
        case 50:
          return '运输中'
        case 60:
          return '已完成'
        case 70:
          return '超时完成'
        case 80:
          return '已取消'
        case 90:
          return '超时接单'
        default:
          return '未提货'
      }}},
  {
    key: 'dispatchStatus', title: '发运状态', width: '', formatter: val => {
      switch (val.dispatchStatus) {
        case 10:
          return '未发运'
        case 20:
          return '已发运'
      }
    }
  },
  { key: 'carrierName', title: '承运商', width: '' },
  { key: 'createUser', title: '创建用户', width: '' },
  { key: 'gmtCreate', title: '创建时间', width: '180px', formatter: formatTime },
  { key: 'modifiedUser', title: '修改用户', width: '' },
  { key: 'gmtModified', title: '修改时间', width: '180px', formatter: formatTime }
]