el-table的formatter属性的使用方法

news/2024/11/8 18:37:28/

一、formatter是什么?

formatter是el-table-column的一个属性,用来格式化内容。(比如后台给你返0或1,你需要展示成“否”和“是”)

二、详细使用

1.知道formatter之前:

代码如下(示例):

 <el-table :data="tabledata"><el-table-column label="类型"  prop="type"><template slot-scope="scope"><span><span v-if="scope.row.type === '1'">菜单</span><span v-else-if="scope.row.type === '2'">按钮</span><span v-else>其他</span></span></template></el-table-column></el-table>

2.知道formatter之后,以上代码就可以改写为:

html中:

 <el-table :data="tabledata"><el-table-column label="类型" :formatter="typeFormatter" prop="type"></el-table-column></el-table>

methods中:

//规范化类型   默认有四个参数(row, column, cellValue, index)详情可以查看elmentUI官网typeFormatter(row){switch(row.type){case '1':return '菜单'case '2':return '按钮'default:return '其他'}}

总结

把这个理解为function修饰就可以了方便好用


http://www.ppmy.cn/news/1158934.html

相关文章

webrtc安全性 加密方式

媒体加密与通信安全 有各种不同的做法会让实时通信软件暴露在安全隐患中。其中需要特别值得注意的是在信息传输的过程中截取未加密的媒体或者数据。这可以发生在浏览器到浏览器之间或者浏览器到服务器之间的通信过程中&#xff0c;第三方可以窃取到所有发送的数据。但是在数据加…

香港空间在http重定向https出现400状态码

在互联网的发展过程中&#xff0c;随着网络安全意识的提高&#xff0c;越来越多的网站开始采用HTTPS协议来保护用户的数据安全。而为了确保所有的HTTP访问都能重定向到HTTPS站点&#xff0c;一些问题也随之而来。 当我们访问一个使用HTTP协议的网站时&#xff0c;很多浏览器默认…

卡券促销活动如何裂变用户?如何设计吸引人的卡券机制?

​卡券促销活动是市场营销中常见的一种策略&#xff0c;它能够有效地促进产品销售。为了满足不同类型的营销需求&#xff0c;需要根据具体情况配置不同的卡券活动落地手段&#xff0c;以更好地抓住消费者的心理&#xff0c;达到增加收入的目的。 在用户拉新方面&#xff0c;可以…

C语言-程序环境和预处理(2)--带副作用的宏参数,宏与函数的对比,#undef,条件编译,文件包含

前言 上一篇文章–《C语言-程序环境和预处理&#xff08;1&#xff09;》讲述了程序的翻译环境和执行环境&#xff0c;编译、连接&#xff0c;预定义符号&#xff0c;#define&#xff0c;#符号和##符号的相关知识。 链接: 《C语言-程序环境和预处理&#xff08;1&#xff09;》…

移动一个const对象会发生什么?

考虑下面的代码 struct Test {Test() { std::cout << "Test::Test\n"; }Test(const Test& rhl) : val_{rhl.val_} {std::cout << "Test(const Test&) called" << std::endl;}Test(Test&& rhl) : val_{rhl.val_}{std::…

CSS阶详细解析一

CSS进阶 目标&#xff1a;掌握复合选择器作用和写法&#xff1b;使用background属性添加背景效果 01-复合选择器 定义&#xff1a;由两个或多个基础选择器&#xff0c;通过不同的方式组合而成。 作用&#xff1a;更准确、更高效的选择目标元素&#xff08;标签&#xff09;。…

PAM从入门到精通(三)

接前一篇文章&#xff1a;PAM从入门到精通&#xff08;二&#xff09; 本文参考以下博文&#xff1a; PAM模块详解及sudo命令 PAM 的应用开发和内部实现源码分析 PAM详解&#xff08;一&#xff09;PAM介绍 Linux进阶_PAM认证机制 Oracle Solaris 10 开发者安全性指南 ——…

云安全—分布式基础

0x00 前言 云必然是依赖于分布式技术来进行实现的&#xff0c;所以有必要学习和来了解分布式相关的内容 0x01 分布式计算 1.基本概述 分布式计算的定义&#xff1a;通过网络互联的计算机都具有一定的计算能力&#xff0c;他们之间互相传递数据&#xff0c;实现信息共享&…