vue模板中elementui的应用el-table-column prop如何调用json对象,将数字转成中文

项目中需要在列表中增加一列显示状态说明，如果直接给出数字，用户看不懂，需要把数字状态转成中文说明才能看得懂。

后台返回的原始数据格式如下

data:[
    {
        "id":156,
        "order_sn": "2021042934567231",
        "record":{"id":13841,"status":10},
        "user":[{"id":111,"name":"zhangsan"},{"id":112,"name":"lisi"}],
        "create_time":"2021-04-29 16:53:50",
    }
]

正常template slot-scope="scope"调用数组的效果如下：

<el-table class="ai-table" :data="tableData" border v-loading="loading" element-loading-text="拼命加载中..." style="width: 100%" @selection-change="handleSelectionChange">

    <el-table-column label="id" prop="id" width="70" align="center" sortable></el-table-column>
    <el-table-column prop="order_key" width="140" label="订单号" align="center"></el-table-column>

    <el-table-column prop="record.status" label="状态" width="80" align="center"></el-table-column>

    <el-table-column prop="user" label="用户" width="80" align="center">
       <template slot-scope="scope">
          {{!scope.row.name?'匿名':scope.row.name}}
        </template>
    </el-table-column>

    <el-table-column prop="create_time" label="时间" align="center"></el-table-column>

</el-table>

效果如下

ID	订单号	状态	用户	时间
156	2021042934567231	10	zhangsan	2021-04-29 16:53:50

 

列表中能调用到record中的status，显示的是数字，不友好。用template slot-scope="scope"是调用不到对象的，只能调用到数组。那么模板中要如何调用对象并做一个格式化输出呢，请往下看，要用到formatter

第一步，使用el-table-column prop调用对象

<el-table class="ai-table" :data="tableData" border v-loading="loading" element-loading-text="拼命加载中..." style="width: 100%" @selection-change="handleSelectionChange">

    <el-table-column prop="record.status" label="状态" width="80" align="center" :formatter="formatStatus"></el-table-column>

</el-table>

第二步，methods中添加formatStatus

methods: {
    //合同状态格式化
    formatStatus: function (row, column, cellValue) {
      var statusTxt = ''; 
      statusTxt = cellValue == null?"无数据":cellValue === 10?"待发货":"状态错误";
      return statusTxt;
    },

}

这样就OK了，在列表页中显示效果如下

ID	订单号	状态	用户	时间
156	2021042934567231	待发货	zhangsan	2021-04-29 16:53:50