vue3表格组件formatter

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

我们可以采用vue3表格组件formatter实现这一点。

例如:

后端返回的数据格式:

java 复制代码
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
  }
]

前端可以这样处理:

html 复制代码
<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 "已启用"
	        }
	    }
}
相关推荐
Gracemark2 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼3 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_5 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing5 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工7 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码10 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199411 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光11 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥11 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司12 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js