el-table-column中formatter格式化字典

2023-05-16

el-table-column中formatter格式化字典

  • vue 中使用 <el-table-column/> 中的 formatter 格式化内容 🔮

    <template>
      <!-- 列表 -->
    	<el-table :data="list">
        <!-- 需要格式化的内容 -->
        <el-table-column prop="type" label="类型" :formatter="typeFormat">
        </el-table-column>
      </el-table>
    </template>
    <script>
      export default{
        data(){
          return{
            // 表格数据
            list:[],
            // 类型
            typeOptions:[]
          }
        },
        created(){
          this.getList();
          // 查询类型字典
    			this.getDicts('risk_amt_type').then((res) => {
    				this.typeOptions = res.data;
    			});
        },
        methods:{
          // 获取表格数据
          getList(){
            // 后台接收表格数据
            this.list=res.data;
          },
          // 格式化表格内容--类型字典翻译
          typeFormat(row) {
            console.log(row);
    				let type = '';
    				this.typeOptions.forEach(item => {
    					if (row.type == item.dictValue) {
    						type = item.dictLabel;
    					}
    				});
    				return type;
    			},
        }
      }
    </script>
    
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-table-column中formatter格式化字典 的相关文章

  • hive中的复杂类型使用

    在Hive 中如何使用符合数据结构 maps array structs 1 Array的使用 创建数据库表 以array作为数据类型 create table person name string work locations array
  • 跨库的触发器

    CREATE TRIGGER addtomsgdown ON dbo TABLE1 FOR INSERTASdeclare usernumber as varchar 11 declare messagecontent as varchar
  • 分拆TableSplit 让多个mapper同时读取

    分拆TableSplit 让多个mapper同时读取 默认情况下 一个region是一个tableSplit 对应一个mapper进行读取 但单mapper读取速度较慢 因此想着把默认一个table split分拆成多个split 这样ha
  • Oracle中connect by...start with...的使用

    一 语法 大致写法 select from some table where 条件1 connect by 条件2 start with 条件3 其中 connect by 与 start with 语句摆放的先后顺序不影响查询的结果 wh
  • alter table move跟shrink space的区别

    author skate time2010 05 28 alter table move跟shrink space的区别 今天主要从两点说他们的区别 1 碎片的整理 2 空间的收缩 SQL gt select from v version
  • Oracle中没有 if exists(...)

    对于Oracle中没有 if exists 的语法 目前有许多种解决方法 这里先分析常用的三种 推荐使用最后一种 第一种是最常用的 判断count 的值是否为零 如下 declare v cnt number begin select co
  • XSL-FO 高级技术4

    概述 第 1 页 共7 页 既然您已经了解了定义打印页面外观的基本元素 现在让我们研究其它 XSL FO 元素 这些元素可以使 PDF 文档看上去更专业 本章将讨论下列主题 定义多页布局 添加页眉和页脚 对页面编号 用 Page x of
  • 数据控制类别(CC1和CC2)——DO-178B/ED-12B学习笔记之七

    数据控制类别 CC1和CC2 DO 178B ED 12B学习笔记之七 为了理解数据控制类别 CC1和CC2 的定义 先看DO 178B的7 3条 原文 Software life cycle data can be assigned to
  • DBA的一些职责

    1 DBA的一些职责 安装和升级数据库服务器 如Oracle Microsoft SQL server 以及应用程序工具 数据库设计系统存储方案 并制定未来的存储需求计划 一旦开发人员设计了一个应用 就需要DBA来创建数据库存储结构 tab
  • 查询及删除重复记录

    查询及删除重复记录的方法大全 1 查找表中多余的重复记录 重复记录是根据单个字段 peopleId 来判断select from peoplewhere peopleId in select peopleId from people gro
  • sqlite 利用bat批处理

    最近忙着给手机平台完善日志和数据统计系统 之前利用txt文件来处理 大概用了2个月 愈加发现数据统计和日志分析的难度 所以从昨天开始 计划找个小型的数据库系统 sqlite在我处理android和iphone客户端开发的时候就接触过 但是没
  • jquery ui 实现table的sortable功能以及过滤记录功能

    本人在工作中曾使用js实现过用鼠标拖动表格的行实现重新排序的功能 当时写了不少的js代码 最近发现jquery ui也能实现这个功能 而且很方便 真后悔当时不知道有这么个好东东 好 现在介绍下如何使用jquery ui来实现 引入的js文件
  • oracle表连接深入浅出

    author skate time 2010 08 20 表的连接 表的连接是指在一个SQL语句中通过表与表之间的关联 从一个或多个表检索出相关的数据 如果一个SQL语句的关联表超过两个 那么连接的顺序如何呢 ORACLE首先连接其中的两个
  • vue+antD 表格中使用input

    vue antD 表格中使用input 在这里插入代码片
  • OceanBase使用范例

    http www mysqlops com 2011 08 31 oceanbase use html OceanBase的使用类似于关系型数据库 需要预先创建schema 关于schema的格式 请参见schema说明 假如我们有以下sc
  • android EditText,键盘textWatcher问题

    我正在开发一个 Android 应用程序 我有一个 EditText 用户可以在其中输入数字 我想使用不同的货币格式 例如 来格式化数字 并且我想即时执行此操作 即当用户输入每个数字时 而不是按下回车键时 我用谷歌搜索了一下 发现文本观察器
  • 在 WPF 中填充数字显示

    我有一个非常简单的位置读数 它只是一个应用了样式的 TextBlock 在那种样式中 我只是这样设置 还有比这更多的属性 但为了简洁我把它们去掉了 现在 我有一个使用这种样式的显示器 它将显示 0 0 到 30000 0 之间的数字 问题是
  • 在 C++ 代码中自动按字母顺序对函数进行排序

    我知道一个C 的类似问题 https stackoverflow com questions 5675636 visual studio 2010 sort functions in the editor alphabetically 我下
  • Eclipse 代码格式化插件

    有人可以建议我一个插件来格式化 HTML 和 JAVA 代码并具有适当的缩进等吗 Eclipse 中有内置选项吗 使用源 gt 格式或 CTRL SHIFT F
  • JFormattedTextField 问题

    1 如何在不使用包含在invokeLater 中的Caret或Focus的情况下将Cursor设置为0位置 可以通过使用 camickr轻松解决格式化文本字段提示 http tips4java wordpress com 2010 02 2

随机推荐

  • ShardingSphere介绍

    官网 xff1a https shardingsphere apache org index zh html 文档 xff1a https shardingsphere apache org document 5 1 1 cn overvi
  • ShardingSphere-JDBC读写分离

    基于之前搭建的mysql主从读写分离使用ShardingSphere JDBC实现读写分离 参考文章 xff1a Docker 部署 MySQL 一主多从 书启秋枫的博客 CSDN博客 CREATE DATABASE mydb2 USE m
  • ShardingSphere-JDBC垂直分片

    什么是数据分片 xff1f 简单来说 xff0c 就是指通过某种特定的条件 xff0c 将我们存放在同一个数据库中的数据分散存放到多个数据库 xff08 主机 xff09 上面 xff0c 以达到分散单台设备负载的效果 数据的切分 xff0
  • ShardingSphere-JDBC水平分片

    项目中可以使用ShardingSphere JDBC将数据存到不同库的表中 一 准备服务器 服务器规划 xff1a 使用docker方式创建如下容器 主服务器 xff1a 容器名server order0 xff0c 端口3310从服务器
  • ShardingSphere-JDBC绑定表

    一 什么是绑定表 指分片规则一致的一组分片表 使用绑定表进行多表关联查询时 xff0c 必须使用分片键进行关联 xff0c 否则会出现笛卡尔积关联或跨库关联 xff0c 从而影响查询效率 例如 xff1a t order 表和 t orde
  • ShardingSphere-JDBC广播表

    一 什么是广播表 指所有的分片数据源中都存在的表 xff0c 表结构及其数据在每个数据库中均完全一致 适用于数据量不大且需要与海量数据的表进行关联查询的场景 xff0c 例如 xff1a 字典表 广播具有以下特性 xff1a xff08 1
  • 01_JUC概述

    1 JUC是什么 xff1f 在 Java 5 0 提供了 java util concurrent 简称JUC 包 xff0c 在此包中增加了在并发编程中很常用的工具类 此包包括了几个小的 已标准化的可扩展框架 xff0c 并提供一些功能
  • 02_Lock锁

    首先看一下JUC的重磅武器 锁 xff08 Lock xff09 相比同步锁 xff0c JUC包中的Lock锁的功能更加强大 xff0c 它提供了各种各样的锁 xff08 公平锁 xff0c 非公平锁 xff0c 共享锁 xff0c 独占
  • 03_线程间通信

    面试题 xff1a 两个线程打印 两个线程 xff0c 一个线程打印1 52 xff0c 另一个打印字母A Z打印顺序为12A34B 5152Z xff0c 要求用线程间通信 public class Demo01 public stati
  • 04_并发容器类

    1 重现线程不安全 xff1a List 首先以List作为演示对象 xff0c 创建多个线程对List接口的常用实现类ArrayList进行add操作 public class NotSafeDemo public static void
  • Java笔记(10)——异常处理

    1 Java异常 Java运行时发生异常可以分为两类 xff1a Error xff1a JVM系统内部错误 资源耗尽等问题产生的异常 Exception xff1a 编程错误或偶然的外在因素导致的 2 常见的异常 2 1 RuntimeE
  • mariadb 数据库连接使用

    今天测试了使用mariadb的使用 xff0c 我使用的springboot 43 mariadb 来操作数据库 xff0c 和以前的代码基本一样 xff0c 就数据变成了mariadb xff0c 驱动还是使用mysql的 pom 文件如
  • 05_JUC强大的辅助类

    JUC的多线程辅助类非常多 xff0c 这里我们介绍三个 xff1a CountDownLatch xff08 倒计数器 xff09 CyclicBarrier xff08 循环栅栏 xff09 Semaphore xff08 信号量 xf
  • 06_Callable接口

    Thread 类 Runnable 接口使得多线程编程简单直接 但Thread类和Runnable接口都不允许声明检查型异常 xff0c 也不能定义返回值 没有返回值这点稍微有点麻烦 不能声明抛出检查型异常则更麻烦一些 public voi
  • 07_阻塞队列(BlockingQueue)

    目录 1 什么是BlockingQueue 2 认识BlockingQueue 3 代码演示 栈与队列概念 栈 Stack xff1a 先进后出 xff0c 后进先出 队列 xff1a 先进先出 1 什么是BlockingQueue 在多线
  • 08_ThreadPool线程池

    1 架构说明 Java中的线程池是通过Executor框架实现的 xff0c 该框架中用到了Executor xff0c ExecutorService xff0c ThreadPoolExecutor这几个类 Executor接口是顶层接
  • Docker 安装 elasticsearch、kibana、ik

    一 安装elasticsearch 1 拉取 elasticsearch 镜像 docker pull elasticsearch 7 6 2 2 创建 elasticsearch 容器 docker run name elasticsea
  • ElasticSearch 中 FieldType 详解

    date float long都是不能够被拆分的 64 Field type 61 FieldType Text analyzer 61 34 ik max word 34 表示该字段是一个文本 xff0c 并作最大程度拆分 xff0c 默
  • SpringBoot 使用 ElasticSearch 编程测试

    1 在 pom xml 准备依赖 lt dependency gt lt groupId gt org projectlombok lt groupId gt lt artifactId gt lombok lt artifactId gt
  • el-table-column中formatter格式化字典

    el table column中formatter格式化字典 vue 中使用 lt el table column gt 中的 formatter 格式化内容 x1f52e lt template gt lt 列表 gt lt el tab