el-table展示枚举值

当后端返回的数据需要转换为枚举值才能在前端正确展示时,可以利用formatter函数进行处理。例如,在一个表格列中,通过遍历预定义的枚举列表,将接收到的key转换为对应的value,实现页面上显示预期的枚举名称。这种方法在处理字典映射时非常实用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候,后端传回来的数据不能直接用,需要转一下,有些字典值,后端直接返回了key,
需要我们转成对应的value,这时候可以用官网给出的formatter函数

在这里插入图片描述

<el-table-column prop="sex" label="性别">
  <template slot-scope="scope">
    <span>{{sexFormat(scope.row.sex)}}</span>
  </template>
</el-table-column>
sexFormat (val) {
	let name = ''
	this.sexList.forEach(item => {
		if ( item.id === val ) {
			name = item.name
		}
	})
	return name
}

这样就可以在页面上展示出来想要的枚举值了。

### 实现 `el-table` 组件单元格显示中文文本 为了使 `el-table` 单元格能够显示中文文本而不是代码,可以利用 Vue 的计算属性或方法来映射数据源中的编码到对应的描述文字。下面是一个具体的实现方式: #### 数据准备 假设有一个枚举对象定义了所有的状态码及其对应的文字说明。 ```javascript const statusMap = { '0': '未处理', '1': '已接受', '2': '已完成' }; ``` #### 表格配置 在表格列设置里通过 `scoped-slot` 或者直接指定 formatter 函数来进行转换操作。 ##### 使用 scoped slot 方式 ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%"> <!-- 其他字段 --> <el-table-column prop="status" label="状态"> <template slot-scope="scope">{{ getStatusText(scope.row.status) }}</template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-03", name: "Tom", status: "0" }, { date: "2016-05-02", name: "Jack", status: "1" }, { date: "2016-05-04", name: "Steve", status: "2" } ] }; }, methods: { getStatusText(code) { return this.$options.filters.statusText(code); } }, filters: { statusText(value) { const map = {"0": "未处理","1":"已接受","2":"已完成"}; return map[value]; } } }; </script> ``` ##### 使用 formatter 方法 ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%"> <!-- 其他字段 --> <el-table-column prop="status" label="状态" :formatter="formatStatus"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-03", name: "Tom", status: "0" }, { date: "2016-05-02", name: "Jack", status: "1" }, { date: "2016-05-04", name: "Steve", status: "2" } ], statusOptions: ["未处理", "已接受", "已完成"] }; }, methods: { formatStatus(row, column, cellValue) { let index = parseInt(cellValue); // 假设这里的cellValue是索引形式的字符串表示 if (!isNaN(index)) { return this.statusOptions[index]; } else { return ""; } } } }; </script> ``` 这两种方法都可以有效地将原始的数据转化为更易读的形式展示给用户[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值