Element-table-formatter格式化数据

1.formatter  用来格式化内容  
 对table的值进行处理。Function(row, column, cellValue, index){}

  使用formatter需要注意以下几点：
  ①无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
  ②在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else

  ③formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。

<template>
    <el-table :data="tableData3"  ref="multipleTable">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
         <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="审核状态" ></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>
<script>
export default {   
    data() {
        return {
            tableData3: [{
                id:'1',
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                IsAudit:0,
                sex:'1'
            }, {
                id:'2',
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                IsAudit:1,
                sex:'0'
            }, {
                id:'3',
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                IsAudit:10,
                sex:'-1'
            }]
        }
    },
    mounted() {
    },
    methods: {
        formatSex: function (row, column, cellValue, index) {
            return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
        },
        //状态改成汉字
        formatterColumn(row, column) {
            switch(row.IsAudit){
                case 0:
                    return '未通过';
                    break;
                case 1:
                    return '审核通过';
                    break;
                case 10:
                    return '待审核';
                    break;
                case 9:
                    return '草稿';
                    break;
                default:
                    return '未知';
            }
        }
    }
}
</script>

 

这篇写的不错：https://blog.csdn.net/gao_xu_520/article/details/80049254