一.最常用的表格格式化内容的方法是通过vue的作用域插槽结合template v-if实现 示例如下
<el-table-column label="状态" slot-scope="scope"> <span v-if="scope.row.status==='0'">成功</span> <span v-if="scope.row.status==='1'">进行</span> <span v-if="scope.row.status==='-1'">失败</span> </el-table-column>
这里遇到个问题就是这个v-if失效，但是可以输出scope.row.status,通过了解得到了这个vue的插槽默认加载第一个元素，所以用div包裹 如下：
<el-table-column label="状态" slot-scope="scope"> <div> <span v-if="scope.row.status === '0'">成功</span> <span v-if="scope.row.status === '1'">进行</span> <span v-if="scope.row.status === '-1'">失败</span> </div> </el-table-column>
二.这种是element-ui table自带的方法formatter()方法。这种的话只能做一些简单的格式化。
<template> <div> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column prop="status" label="状态" :formatter="statusFormatter"> </el-table-column> </el-table> </div> </template>
methods: { statusFormatter(row){ if(row.status==="0"){ return "成功"; }else if(row.status==="1"){ return "进行中"; }else if(row.status==="-1"){ return "失败"; } } },
