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

我们可以采用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   } ] 

前端可以这样处理：

 	   	     	   	   	   	   	     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 "已启用" 	        } 	    } }