阅读量:0
有时候在网页上显示表格数据时，表格的某些列值只有有限数目（例如，启用/停用），这时候后端常常使用不同的数据值表示不同状态，前端怎么将这些数据值转化为相应的列值呢？
我们可以采用vue3表格组件formatter实现这一点。
例如：
后端返回的数据格式：
tableData:[ { "id": "1", "recCreateTime": "2024-08-01 09:27:47", "name": "张三", "sex": 0， "status":1 }, { "id": "2", "recCreateTime": "2024-08-01 09:28:10", "name": "李四", "sex": 0， "status":0 }, { "id": "3", "recCreateTime": "2024-08-01 09:28:41", "name": "王五", "sex": 1， "status":1 }, { "id": "4", "recCreateTime": "2024-08-01 09:30:03", "name": "刘六", "sex": 0， "status":1 } ] 前端可以这样处理：
<el-table :data="tableData" style="width: 100%" :height="screenHeight * 0.8"> <el-table-column label="序号" width="50px" align="center"> <template slot-scope="scope"> {{ scope.$index + 1 }} </template> </el-table-column> <el-table-column :label="$t('用户名')" prop="name" align="center"/> <el-table-column :label="$t('创建日期')" prop="recCreateTime" align="center"/> <el-table-column :label="$t('性别')" prop="sex" align="center" :formatter="sextypeFormatter"/> <el-table-column :label="$t('状态')" prop="status" align="center" :formatter="statustypeFormatter"/> </el-table> export default { methods: { sextypeFormatter: function (row) { if(row.sex == 0){ return "男" } else if(row.sex == 1){ return "女" } }, statustypeFormatter: function (row) { if(row.status == 0){ return "未启用" } else{ return "已启用" } } } 