vue中表格formatter格式化内容的用法

最新推荐文章于 2025-04-18 09:40:21 发布

rikiemo

最新推荐文章于 2025-04-18 09:40:21 发布

阅读量1.2w

点赞数 3

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/kuguhuan/article/details/106850013

版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种在前端框架中使用的方法，通过自定义表格列格式化器改变显示的人物属性，将数字类型的属性值转换为更易理解的文字描述，如将0转换为“副”，非0转换为“主”。这种方法提高了数据的可读性。

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

<el-table-column prop="manProp" label="属性" :formatter="changeManProp" width=""></el-table-column>

//改变显示的人物属性
changeManProp(row, column){
	const manProp = row[column.property];
	var string = null;
	if(manProp == 0){
		string = "副";
	}
	else{
		string = "主";
	}
	return string;
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rikiemo

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3表格组件formatter

qq_44021627的博客

08-02

666

有时候在网页上显示表格数据时，表格的某些列值只有有限数目（例如，启用/停用），这时候后端常常使用不同的数据值表示不同状态，前端怎么将这些数据值转化为相应的列值呢？我们可以采用vue3表格组件。

详解vue2.0的Element UI的表格table列时间戳格式化

08-30

本文将深入探讨如何在Element UI的表格（`el-table`）组件中，对时间戳进行格式化，使其展示为易读的日期和时间格式。首先，我们来看一个基本的`el-table`的示例。在HTML模板中，定义了一个表格，并指定了数据源`...

1 条评论您还未登录，请先登录后发表或查看评论

Vue数据格式化，:formatter的使用

weixin_45618937的博客

05-19

3350

:formatter

vue中formatter的使用方法

热门推荐

Evan's Blog ٩(๑❛ᴗ❛๑)۶

02-15

2万+

一、需求描述我们平时接收到后台传来的数据是某种状态码，或者数字标识，需要我们在前端将其转换为对应的内容。如图所示，其实我们接收到的标识是0、1、2。将其转换成女，男，无限制。二、使用:formatter 我们可以使用:formatter，代码如下。 prop对应你要取的值，:formatter对应方法。注意不要忘了冒号。 <el-table :data="r...

Vue3实战第十二章表格组件里el-table-column 的 formatter属性应用

Java 技术专栏，从入门到精通，熟悉企业级开发

03-12

9752

今天讲解表格组件里el-table-column 的 formatter属性应用，比如时间格式化、数据格式化、状态格式化等，解决我们急需的功能，也方便以后自己查找。

Vue实现表格中对数据进行转换、处理的方法

10-18

本篇文档详细介绍了如何在Vue项目中处理表格数据，特别是对时间数据进行格式化的方法。首先，当后端从数据库（比如MySQL）中取出的数据往往不符合前端展示的要求，例如日期时间字段的格式可能与用户的期望不同。...

element-ui 表格数据时间格式化的方法

12-02

标题中的“element-ui 表格数据时间格式化的方法”主要涉及了如何将后台返回的以毫秒为单位的时间戳转换为用户友好的日期时间格式。后台返回的时间格式可能是 `/1470220594000/` 这样的字符串，它代表的是距离 Unix ...

vue+element 表格formatter数据格式化并且插入html标签

06-01

可以使用 Element UI 表格的 `formatter` 属性来对数据进行格式化，同时也可以使用 Vue 的 `v-html` 指令来插入 HTML 标签。例如，我们有一个表格列需要将数据格式化为带有颜色的文字，并且需要将文字加粗。可以...

element+vue使用:formatter

学习记录

01-04

1645

效果图： 1. 新建config.js文件 export const deviceStatusList = [{ label: "未注册", value: "0", }, { label: "已注册", value: "1", }, { label: "已绑定", value: "2", }, ] export const onlineStatusList = [{

bootstrap-table formatter 使用vue组件的方法

10-17

Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。这篇文章重点给大家介绍bootstrap-table formatter 使用vue组件的方法，感兴趣的朋友一起看看

VUEFormatter-Sublime文本代码格式-Vue.js开发

05-27

通过node.js Sublime Text 3用于Sublime Text 2和3的vue代码格式化程序JS-美化Node.js下载关于这是通过node.js Sublime Text 3用于Sublime Text 2和3的Sublime Text 2和3插件allowi vue代码格式化程序。 JS-美化Node.js下载关于这是一个Sublime Text 2和3插件，可用于格式化vue代码。安装Mac git clone https://github.com/baixuexiyang/VUEFormatter.git〜/ Library / Application \ Support / Sublime \ Text \ 3 / Packages / VUEFormatter Linux git clone https://github.com/baixuexiyang/VUEFormatter.git 〜/ .config / sublime-text-3 / Packages / VUEFormatter Windows git克隆https://github.com/

Vue项目Element表格对应字段映射显示方法:formatter格式化数据

m0_61984559的博客

04-24

1221

需求：表格中性别字段的值是"0"时显示"男"，值是"1"时显示"女" Vue项目Element表格对应字段映射显示方法:formatter格式化数据

Vue Table 表格利用formatter属性格式化数据

supramolecular的博客

07-11

1万+

利用formatter属性格式化数据格式化数据 <el-table-column show-overflow-tooltip :formatter="handphase" type="selection" align="c...

vue，elementui——table表格中的:formatter属性

dreamgis的专栏

08-07

4559

vue，elementui——table表格中的:formatter属性 :formatter 常用来格式化内容 Function(row, column, cellValue, index) 使用： script 导入moment并定义： import moment from ‘moment‘ export default { name: ‘Notices‘, data () { return { … } }, methods: { // 格式化日期 dateFormat(row, column) {

Vue——filters、formatter改变table列显示

tellmewsm

10-25

1556

前端经常在表格显示的时候需要进行列转换，目前使用到两种方式 1、使用elementui中formatter 用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。 2、使用filters过滤器：跟methods同级 {{ message | filterA('arg1', arg2) }} 这里，filterA被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数，普通字符串'arg1'作为第二个参数，表达式...

vue 中formatter