el-table表格格式化某一列数据；统一处理el-table表格某一列数据

以下代码可以直接复制使用

场景：table的原数据就是姓名1234，但是现在想要改成统一的格式。可以使用formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

在这里插入图片描述

新数据:
在这里插入图片描述

解决方案：在需要处理的那行，添加 :formatter=“formatter” 属性和处理方法,使用此属性，不会改变原表格数据tableData

<template><div tyle="width: 1000px;"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180" :formatter="formatter"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table><el-button @click="getdata">获取列表数据</el-button></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '2',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '3',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '4',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {formatter (row, column) {console.log(row, column)// switch (row.name) {//   case '1'://     return '用户1'//   case '2'://     return '用户2'//   case '3'://     return '用户3'//   case '4'://     return '用户4'// }let newName = '用户' + row.namereturn newName},getdata () {console.log(this.tableData)}}
}
</script>