一.最常用的表格格式化内容的方法是通过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 "失败";
            }
        }
    },

三.以上两种是最常用的两种方法，但是第二种不能直接插入html标签，所以项目中很少使用，第一种用的最多，可以说是万能的，直接拿去用就可以了。其实方法很多，就看自己喜欢那种了。今天就分享到这里了，喜欢可以点赞评论，祝大家前程似锦。