vue项目使用element UI格式化table中某一字段时:formatter不生效的问题

已于 2022-08-25 15:07:11 修改
阅读量1.4w 收藏 3
点赞数 1
文章标签： vue 前端 js
于 2019-05-20 16:30:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41656074/article/details/90377345
版权 
<el-table-column label="用户角色" width="120" :formatter="formatFunc">
        <template slot-scope="scope">
          <span>{{ scope.row.role.roleName }}</span>
        </template>
</el-table-column>

formatFunc一直不执行,后来经过排查发现是template中插槽作用域导致的,

<el-table-column prop="roleName" label="用户角色" width="120" :formatter="formatFunc">
</el-table-column>

像这样写就搞定了!

不过后来发现用vue自带的filter过滤器更加方便,可以全局统一管理,用起来那叫一个爽!

SyronChoo
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
【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的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">
Element UI踩坑记 —— el-table中 formatter 的属性居然失效了
做技术，坚持才是最重要的，一时的热情只是暂时的进步
01-13 7163
一、问题引入 今天实习要完成一个数据表格的小案例，要求是能根据数据的严重程度，在页面上显示不同的样式。 我是使用element-ui中的表格组件对数据进行处理，在处理的过程中就掉进坑里。el-table 组件结合插槽和数据格式化（formatter）时，是数据格式化是不会生效的。 解决方法：只能自己封装el-table中formatter方法 二、案例 ...
el-table的formatter属性的使用方法
qq_38210427的博客
05-22 618
的一个属性，用来格式化内容。（比如后台给你返0或1，你需要展示成“否”和“是”）formatter是。
使用el-table组件时,对字段进行forEach循环:famatter时不生效
qq_39691676的博客
09-28 550
formatte不能使用forEach Func(row, column, cellValue, index) { const arr = this.regQueryPatternOptions for (let i = 0; i < arr.length; i++) { if (cellValue === arr[i].sdValue) { return arr[i].sdName } } },
el-table :formatter属性失效
weixin_459417989的博客
09-24 4228
在这种情况下会失效，formatter不能和scope一起使用， <el-table-column label='状态' prop="type" :formatter="formatter"> <template slot-scope="scope"> <p>{{scope.row.type}}</p> </template> </el-table-column> <script> methods:{ f
vue后台管理系统项目中使用element-UI封装好table了组件，但是格式化时，table中某一字段formatter不生效的问题
qq_44304465的博客
07-06 1690
今天在项目中遇到一个问题，就是自己封装好了组件，但是引用那个组件时别的东西都能显示，就是formmter一直没用，后面发现是template中插槽作用域导致的, <el-table-column v-for="(item,index) in columns" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minWidth" :formatter="item.forma
element的formatter失效的解决方案
qq_41306452的博客
02-13 628
element table formatter失效
详解vue2.0的Element UI的表格table列时间戳格式化
01-21
这两天学习了vue2.0的Element UI的表格table列时间戳格式化，所以，今天添加一点小笔记。 表格属性 <el data=tableData v-loading.body=loading selection-change=selectionChange xss=removed> <el-table-...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
在开发Web应用时，我们经常需要处理复杂的表单数据，特别是在使用Element-UI与Vue.js框架的情况下。Element-UI提供了一套丰富的UI组件库，其中包括表格（Table）和表单（Form），它们可以帮助我们构建出美观且功能...
vue element-ui table 组件封装使用
最新发布
06-07
在Vue.js开发中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI组件，包括我们今天要讨论的Table组件。Table组件在实际项目中经常用于展示数据，但每个项目的需求可能各不相同，因此对其进行封装能...
vue中element表格formatter属性的使用
cxfh5的博客
12-16 4363
vue中使用element ui时formatter的使用方法 formatter属性的使用 相信大家在使用element Ui时用到表格的情况还是比较多的，不知道大家有没有注意到它的formatter属性，废话不多说直接上例子 formatter <el-table-column prop="sex" label="性别" width="150" align="center" :formatter="formatRole" /> 下面就是对这个表格中formatter属性的值就行处理 f
掌握el-table的formatter方法，提升数据展示效果
Shids_的博客
12-08 9808
掌握el-table的formatter方法，提升数据展示效果
在Echarts中使用地图时遇到的一个关于formatter异步加载的问题
qq_42444651的博客
02-25 960
在使用Echarts的formatter的提示框时候，遇到了关于异步加载的问题，懒得写文字了，我把具体问题和解决方法放在视频里了： 关于Echarts中formatter提示框异步加载遇到的一个问题（错误解决记录） ...
vue el-table数据转换，使用<template slot-scope="scope">对表格赋值时，formatter 不起作用
且听风吟的博客
08-22 7509
<el-table-column prop="deptType" label="部门类型" :formatter="formatDepartType" > </el-table-column> methods: { formatDepartType(row, column, cellValue){ ...
vue el-table中设置传入数据为el-link，formatter格式化传入数据，插槽获取行数据
m0_53397075的博客
12-25 1383
vue el-table中设置传入数据为el-link，formatter格式化传入数据，插槽获取行数据
el-table表格展示并写入枚举值（formatter）
NancyFyn的博客
10-18 2484
table表格展示并写入枚举值（formatter）
二次封装的el-table组件 formatter 的属性失效
weixin_44875212的博客
03-29 900
这样就可以
vue element ui table 某列格式化时间
06-09
如果你使用 Vue 和 Element UI 的 Table 组件来显示数据，而你需要格式化其中一列的时间，你可以使用 Element UI 的 Table 组件提供的 `formatter` 属性。 例如，假设你有一个数据数组 `tableData`，其中包含一个 `createAt` 字段，表示创建时间： ```js [ { id: 1, name: 'John', createAt: '2021-01-01 12:00:00' }, { id: 2, name: 'Jane', createAt: '2021-01-02 13:00:00' }, { id: 3, name: 'Bob', createAt: '2021-01-03 14:00:00' }, ] ``` 如果你想要将 `createAt` 字段格式化为类似 `2021-01-01 12:00:00` 的样式，你可以使用 `formatter` 属性来实现： ```html <el-table :data="tableData"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="createAt" label="Create At" :formatter="formatCreateAt"></el-table-column> </el-table> ``` 在上面的代码中，我们定义了一个 `formatCreateAt` 方法来格式化 `createAt` 字段： ```js methods: { formatCreateAt(row, column) { return new Date(row.createAt).toLocaleString() } } ``` 在 `formatCreateAt` 方法中，我们将 `createAt` 字段转换为 `Date` 对象，然后使用 `toLocaleString` 方法将其格式化为本地时间字符串。 这样，当你渲染表格时，`Create At` 列中的时间就会显示为格式化后的时间字符串了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值