el-table的formatter属性的使用方法

一、formatter是什么？

formatter是el-table-column的一个属性，用来格式化内容。（比如后台给你返0或1，你需要展示成“否”和“是”）

二、详细使用

1.知道formatter之前：

代码如下（示例）：

 <el-table :data="tabledata">
      <el-table-column label="类型"  prop="type">
          <template slot-scope="scope">
                <span>
                  <span v-if="scope.row.type === '1'">菜单</span>
                  <span v-else-if="scope.row.type === '2'">按钮</span>
                  <span v-else>其他</span>
                </span>
            </template>
      </el-table-column>
   </el-table>

2.知道formatter之后，以上代码就可以改写为：

html中：

 <el-table :data="tabledata">
      <el-table-column label="类型" :formatter="lifeCycleFormatter" prop="type"></el-table-column>
 </el-table>
 

methods中：

const lifeCycleFormatter = (row) => {
  switch (row.lifeCycle) {
    case '1':
      return '线索'
    case '2':
      return '商机'
    case '3':
      return '成交'
    case '4':
      return '复购'
    case '5':
      return '流失'
    default:
      return '其它'
  }
}