当前位置: 首页 > news >正文

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

一、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.lryc.cn/news/195397.html

相关文章:

  • 高质量床上用品类网站带手机端的pbootcms模板
  • paddlenlp:社交网络中多模态虚假媒体内容核查(特征篇)
  • 【网络】总览(待更新)
  • 策略模式——多重if-else解决方案
  • CTAmap 1.12版本2013年-2023年省市县矢量数据更新
  • 【Linux初阶】多线程3 | 线程同步,生产消费者模型(普通版、BlockingQueue版)
  • JUC并发编程——四大函数式接口(基于狂神说的学习笔记)
  • 【2】c++11新特性(稳定性和兼容性)—>超长整型 long long
  • AI算法检测对无人军用车辆的MitM攻击
  • 运维 | 如何在 Linux 系统中删除软链接 | Linux
  • Jmeter接口测试:jmeter导入和导出接口的处理
  • 一文了解 Go fmt 标准库的常用占位符及其简单使用
  • Linux命令(94)之history
  • Prompt 驱动架构设计:探索复杂 AIGC 应用的设计之道?
  • 【代码随想录】算法训练营 第三天 第二章 链表 Part 1
  • winform开发经验(1)——调用Invoke更新UI时程序卡死原因以及解决办法
  • JNI 的数据类型以及和Java层之间的数据转换
  • EFLK与logstash过滤
  • docker jenkins
  • 单例模式之「双重校验锁」
  • 2023年中国商业版服务器操作系统市场发展规模分析:未来将保持稳定增长[图]
  • BIM如何通过3D开发工具HOOPS实现WEB轻量化?
  • Unity 3D基础——通过四元数控制对象旋转
  • python--短路运算,把0、空字符串和None看成 False,其他数值和非空字符串都看成 True
  • 《算法通关村第一关——链表青铜挑战笔记》
  • 【深度学习实验】循环神经网络(四):基于 LSTM 的语言模型训练
  • IOS课程笔记[1-3] 第一个IOS应用
  • Flink的基于两阶段提交协议的事务数据汇实现
  • 树模型(三)决策树
  • vueday01——使用属性绑定+ref属性定位获取id