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