无插槽时的数据格式化
无插槽的情况下，使用 el-table-column 的formatter属性，可以格式化指定列的值
<el-table-column prop="address" label="地址" :formatter="formatter"> </el-table-column>
methods: { formatter(row, column) { return “深圳市” + row.address; } }
有插槽时的数据格式化
但若使用了插槽，该如何对数据进行格式化呢？可以参考下方完整范例：
<template> <div style="padding: 20px"> <el-table :data="tableData" style="width: 100%" border > <el-table-column v-for="(item,index) in config.itemList" :key="index" :prop="item.prop" :label="item.label" align="center" > <template slot-scope="scope"> <span v-if="item.formatter"> {{ item.formatter(scope.row[item.prop])}} </span> <span v-else> {{ scope.row[item.prop]}} </span> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: "张三", gender: "1" }, { name: "李丽", gender: "2" }, { name: "何华", gender: "" }, ], config: { itemList: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'gender', formatter: (val) => { if (val === '1') { return '男' } else if (val === '2') { return '女' } else { return '未知' } } }, ] }, } }, } </script> <style scoped> </style>
