深圳做网站案例营销策划方案案例

有时候在网页上显示表格数据时，表格的某些列值只有有限数目（例如，启用/停用），这时候后端常常使用不同的数据值表示不同状态，前端怎么将这些数据值转化为相应的列值呢？

我们可以采用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 "已启用"}}
}