el-table-column字段格式化转换，formatter属性使用

原创 已于 2024-08-09 11:17:08 修改 · 2.2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

于 2024-08-09 11:14:56 首次发布

el-table-column字段格式化转换，formatter属性使用

el-table-column是element ui框架中table的子元素，用于控制单列字段的展示，本文介绍el-table-column的formatter属性的使用

element ui的table-column官方文档地址：https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes

1. table-column formatter属性介绍

下面是element ui官方文档的描述

参数 说明 类型 可选值 默认值
formatter 用来格式化内容 Function(row, column, cellValue, index) — —

2. 使用方式

2.1. 无传参方式

2.1.1. 代码示例
<template>
    <el-table
      :dat
最低0.47元/天 解锁文章

200万优质内容无限畅学
【vue】el-table格式化el-table-column内容（主要的三种方法）
m0_67401499的博客
03-06 1万+
el-table格式化el-table-column内容 遇到一个需求，一个循环展示的table中的某项，或者某几项需要格式化。对于格式化的方法，主要有template scope、formatter； 一、template scope 、v-if判断 <el-table-column prop="cyxb" label="性别"> <template slot-scope="scope"> <span v-if="scope.row.cyxb == 0
el-table-column根据值来转化为自定义表达
lay523的博客
03-28 3313
最近使用VUE的时候 为了方便在数据库中存储的类型（type）为0/1 但是在前端页面中却需要用初级/高级来表示。 正常在el-table-column 中显示值， <!-- 此处的prop就是数据绑定的属性，--> <el-table-column prop="type" label="班课类型"></el-table-column> 采用下面代码可以转化为自定义的值 <el-table-column label="班课类型" width="70"&g
Vue3实战 第十二章 表格组件里el-table-column 的 formatter属性应用
Java 技术专栏，从入门到精通，熟悉企业级开发
03-12 1万+
今天讲解表格组件里el-table-column 的 formatter属性应用，比如时间格式化、数据格式化、状态格式化等，解决我们急需的功能，也方便以后自己查找。
element ui中的el-table-column字段格式化
最新发布
lvtaos的博客
06-22 145
然后在 methods 中添加方法。
详解vue2.0的Element UI的表格table列时间戳格式化
08-30
本篇文章主要介绍了详解vue2.0的Element UI的表格table列时间戳格式化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
el-table的formatter属性的用法
热门推荐
采花小盗周的博客
09-30 2万+
一、formatter是什么？ formatter是el-table-column的一个属性，用来格式化内容。（比如后台给你返0或1，你需要展示成“否”和“是”） 二、详细使用 1.知道formatter之前： 代码如下（示例）： <el-table :data="tabledata"> <el-table-column label="类型" prop="type"> <template slot-scope="scope">
el-table-column的formatter的使用
weixin_44707050的博客
02-09 7278
当后端返回来的数据格式需要再去处理；可以使用formatter属性 <el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column> eg: gendarFomat(row, column) { if (row.gender == 0) { return "女"; } else if (row.gender == 1)
el-table格式化el-table-column内容
树上骑个猴的博客
03-01 1517
对于格式化，有三种方法：template scope、formatter 一、template scope + v-if判断 <el-table-column prop="sex" label="性别"> <template slot-scope="scope"> <span v-if="scope.row.sex== 0">男</span> <span v-if="scope.row.sex== 1">女
el-table的el-table-column获取列数据并且转换
weixin_48860638的博客
06-15 2284
转换el-table-column
el-table-column格式化显示内容
weixin_46229508的博客
12-08 1852
el-table-column修改默认显示，添加单位
ElementUI中el-table-column的数据格式化方式有两种
kobe_IT的博客
04-18 3100
// 格式化实际回款日期 formatCashDate(row, column) { },
ElementUI 之el-table-column 格式化属性（日期格式化）
zhouzhiwengang的专栏
09-07 3654
如果想对表格某一列的内容格式化（性别\日期显示），可用 formatter 属性。 实战：日期显示 在method 定义formatDate 方法 formatDate(row, column) { // 获取单元格数据 let data = row[column.property] if(data == null) { return null
el-table格式化el-table-column内容，根据值进行判断渲染
donghua201的博客
09-26 2177
【代码】el-table格式化el-table-column内容，根据值进行判断渲染。
el-table 中的列使用formatter格式化数据
2301_76580047的博客
04-11 248
formatter可以对传入的数据进行格式化，可以用在脱敏等方面。可以在formatter方法中对数据进行处理。
el-table-column 数据处理、数据转换
corleone_4ever的博客
02-28 6937
在Element UI table中 我们需要用到 formatter 属性来格式化内容 <el-table-column prop="hasBack" label="是否有多服务" :formatter="hasBackFormat"></el-table-column> //是否多服务数据处理 ...
Vue element el-table-column标签中对日期进行格式化（全局过滤器）
03-03 1万+
1、安装时间格式化插件 npm install vue-moment --save 2、在main.js中引用 import moment from 'moment' Vue.use(require('vue-moment')); Vue.prototype.moment = moment 3、在main.js中加入日期格式化的过滤器，其中dateYMDHMSFormat为方法名称 ...
el-table-column日期格式化
03-29
### 如何在 Element UI 的 `el-table-column` 中对日期字段进行格式化 在 Element UI 的表格组件 (`el-table`) 中，可以通过 `el-table-column` 提供的 `formatter` 属性来实现自定义的数据格式化功能。对于日期字段的格式化，有多种方式可以选择。 #### 使用内置函数实现日期格式化 通过 `formatter` 属性绑定一个自定义的方法，在该方法中处理日期数据并返回所需的格式字符串。以下是具体实现： ```html <template> <el-table :data="tableData"> <!-- 其他列 --> <el-table-column prop="dateField" label="日期" width="180" :formatter="formatDate"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { dateField: '2023-09-01T12:00:00Z' }, { dateField: '2023-09-02T15:30:45Z' } ] }; }, methods: { formatDate(row, column) { const dateValue = row[column.property]; // 获取当前行对应的日期字段值 if (!dateValue) return ''; // 如果无值，则返回空字符串 const dateObj = new Date(dateValue); // 将 ISO 字符串转换为 JavaScript Date 对象 return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String( dateObj.getDate() ).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String( dateObj.getMinutes() ).padStart(2, '0')}:${String(dateObj.getSeconds()).padStart(2, '0')}`; // 自定义格式化逻辑 } } }; </script> ``` 上述代码展示了如何利用原生 JavaScript 的 `Date` 类型对象完成日期格式化操作[^5]。 --- #### 借助第三方库（如 Moment.js 或 day.js） 为了简化日期处理过程，可以引入第三方库（例如 `moment.js`），它提供了更强大的日期解析和格式化能力。 ##### 实现步骤： 1. **安装依赖** ```bash npm install moment --save ``` 2. **修改 Vue 组件代码** ```html <template> <el-table :data="tableData"> <!-- 其他列 --> <el-table-column prop="dateField" label="日期" width="180" :formatter="formatDateWithMoment"></el-table-column> </el-table> </template> <script> import moment from 'moment'; // 导入 moment 库 export default { data() { return { tableData: [ { dateField: '2023-09-01T12:00:00Z' }, { dateField: '2023-09-02T15:30:45Z' } ] }; }, methods: { formatDateWithMoment(row, column) { const dateValue = row[column.property]; if (!dateValue) return ''; return moment(dateValue).format('YYYY-MM-DD HH:mm:ss'); // 利用 moment 进行格式化 } } }; </script> ``` 此方案不仅提高了开发效率，还能减少手动编写复杂日期计算逻辑的工作量[^4]。 --- #### 性能优化建议 当面对大量数据时，频繁调用复杂的日期格式化可能会带来性能瓶颈。因此推荐以下两种策略之一： 1. **提前预处理数据** 在获取原始数据后立即对其进行一次性的格式化处理，并存储到新的字段中用于展示。 2. **懒加载渲染** 结合虚拟滚动技术或其他分页机制降低每次重新绘制整个表格的成本。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值