element ui 表格状态展示

以下代码：
第一种：

<el-table-column
  prop="status"
  label="状态"
  width="150px"
  align="center">
    <template slot-scope="scope">
      {{ statusbtn(scope.row.status) }}
    </template>
</el-table-column>

statusOptions: [{
  id: 1,
  name: '待提交'
 }, {
  id: 2,
  name: '已提交、进行中'
 }, {
  id: 3,
  name: '已申请'
 }, {
  id: 4,
  name: '已中止'
 }, {
  id: 5,
  name: '审核通过'
 }, {
  id: 6,
  name: '审核拒绝'
 }, {
  id: -99,
  name: '已删除'
}],
methods方法：
statusbtn(val) {
  for (const key in this.statusOptions) {
    if (this.statusOptions[key].id === val) {
      return this.statusOptions[key].name
    }
  }
},

第二种：

<el-table-column
 prop="status"
 label="状态"
 width="150px"
 align="center"
>
 <template slot-scope="scope">
   <!-- {{ statusbtn(scope.row.status) }} -->
   {{ scope.row.status===1?'待提交':scope.row.status===2?'已提交、进行中':scope.row.status===3?'已申请':scope.row.status===4?'已中止':scope.row.status===5?'审核通过':scope.row.status===6?'审核拒绝':scope.row.status===-99?'已删除':'状态有误' }}
 </template>
</el-table-column>

第三种：

<el-table-column
  prop="status"
  label="状态"
  width="150px"
  align="center"
  :formatter="handleStatus"
/>
methods方法：
handleStatus(row, column, cellValue, index) {
  switch (cellValue) {
    case 1:
      return '待提交'
    case 2:
      return '处理中'
    case 3 :
      return '已完成'
  }
},