element UI-表格数据转换/格式化

业务老师想要将表格中的比例按照百分比显示,还是带 % 的这种,但是后端只是返回了一个 0-100 的数值,就需要前端自己做转换。

类似的还有

0与1 转换为 男与女

根据当前值返回不同的结果等。

可以使用 Table-column Attributes 的 formatter

代码为

<af-table-column prop="XX" label="XX比例" :formatter="XXFormat" align="center"></af-table-column>
XXFormat (row, column, cellValue, index) {
      return cellValue + '%'
    }

该函数一共有4个入参,分别是行、列、当前字段值、行下标。

在方法体中按需实现即可。

直接操作 cellValue ,if switch 什么的

根据引用中的代码,可以看出该代码是使用Element UI的el-table组件来展示表格数据。通过设置show-summary为true,可以显示表格的汇总行,并通过summary-method来指定汇总的方法。el-table-column标签用于定义表格的列,其中使用v-for循环来渲染多个列。每个列的具体属性可以通过list对象来设置,包括prop(数据字段)、label(列名)、type(列类型)、sortable(是否可排序)等。同时可以通过formatter来设置列的格式化方式。 引用中的代码使用了slot-scope来获取当前行的数据,并通过判断isenabled字段的值来显示不同的文本。 引用中的代码是一个自定义的表格列,通过设置prop属性来指定数据字段,label属性来指定列名,align属性来指定对齐方式,同时还使用了formatter属性来设置列的格式化函数。在XXFormat函数中,通过传入的参数可以获取到当前行的数据,从而进行相应的格式化操作。 综上所述,根据不同的需求,可以使用Element UI的相关组件和属性来对表格数据进行过滤和格式化操作。123 #### 引用[.reference_title] - *1* [VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法](https://blog.csdn.net/HanXiaoXi_yeal/article/details/124966321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [element UI-表格数据转换](https://blog.csdn.net/qq_39928481/article/details/124122797)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *3* [element UI-表格数据转换/格式化](https://blog.csdn.net/JustDI0209/article/details/124044804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值