elementUI表格中某个字段(state)使用计算属性进行转换为对应中文显示

news2024/9/29 20:20:01

代码案例:

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    />
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    />
    <el-table-column
      prop="state"
      label="地址"
    >
      <template slot-scope="scope">
        {{ stateNameMap(scope.row.state) }}
      </template></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      homeCity: [
        { state: 1, name: '李四' },
        { state: 3, name: '张三' },
        { state: 7, name: '王五' },
        { state: 33, name: '王五1' }
      ],
      state: 1,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        state: 1
      }, {
        date: '2016-05-04',
        name: '王小虎',
        state: 3
      }, {
        date: '2016-05-01',
        name: '王小虎',
        state: 7
      }, {
        date: '2016-05-03',
        name: '王小虎',
        state: 3
      }]
    }
  },
  computed: {

    stateNameMap() {
      return (state) => {
        console.log(state, '>>>')
        // 在homeCity数组中查找具有匹配ID的对象
        const row = this.homeCity.find(r => r.state === state)
        // 如果找到了对象,则返回其name属性;否则,返回一个默认值(如'未知城市')
        return row ? row.name : '未知城市'
      }
    }
  },
  methods: {

  }
}
</script>

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2177731.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

count(1),count(*)与 count(‘列名‘) 的区别

文章目录 COUNT(expr)性能对比count(*) VS count(1)count(*) VS count(列名) count(*)会走索引吗MyISAM count优化InnoDB如何处理count(*)总结 参考官方文档&#xff1a; https://dev.mysql.com/doc/refman/8.4/en/aggregate-functions.html#function_count COUNT(expr) coun…

叶国富“推翻”马云新零售,零售新王此刻登基?

63亿入主永辉超市&#xff0c;拿到29.4%股份&#xff0c;坐上永辉超市第一大股东的宝座&#xff0c;名创优品创始人叶国富&#xff0c;成为了新科“零售之王”。 很是霸气外漏。 有投资者表示费解&#xff0c;不明白为何此时入局超市行业&#xff0c;叶国富当即召开电话会议&…

数据结构:树的定义及其性质

树的定义 树是一种重要的非线性数据结构&#xff0c;树作为一种逻辑结构&#xff0c;同时也是一种分层结构。具有以下两个特点&#xff1a; 1.树的根结点没有前驱&#xff0c;除根结点意外的节点只有一个前驱 2.树中所有结点都可以有0个或多个后继 树结构在多个领域都有广泛…

JVM相关的命令汇总

一、简介 虽然目前市场上有很多成熟的 JVM 可视化监控分析工具&#xff0c;但是所有的工具其实都依赖于 JDK 的接口和底层相关的命令&#xff0c;了解这些命令的使用对于在紧急情况下排查 JVM 相关的线上故障&#xff0c;会有更加直观的帮助。 下面一起来看看 JVM 常用的命令…

ARM硬件知识补充

一、硬件知识 1.三极管 三极管定义&#xff1a;全称应为半导体三极管&#xff0c;也被称为双极型晶体管或晶体三极管。 主要功能&#xff1a;是将微弱的电信号放大成幅度值较大的电信号&#xff0c;同时也被用作无触点开关。 分类&#xff1a;分为NPN型和PNP型两种类型。 …

GNSS定位中自适应调整电离层延迟参数过程噪声的方法

文章目录 前言一、非差非组合PPP模型二、电离层功率谱密度计算三、具体实现方法3.1 不平滑3.2 三阶多项式平滑 参考文献 前言 GNSS定位中不少技术手段如PPP和长基线RTK需要将电离层延迟作为参数估计&#xff0c;电离层延迟的变化通常被描述为随机游走过程&#xff0c;而功率谱密…

three.js 通过着色器实现热力图效果

three.js 通过着色器实现热力图效果 在线预览 https://threehub.cn/#/codeMirror?navigationThreeJS&classifyshader&idheatmapShader 在 https://threehub.cn 中还有很多案例 <!doctype html> <html lang"en"> <head> <meta charse…

RFID标签的前世今生

一、RFID标签发展历程 1.1 技术突破 RFID标签技术自20世纪90年代兴起以来&#xff0c;经历了多次重要的技术突破&#xff0c;这些突破极大地推动了RFID技术的发展和应用。 标签供电方式的革新&#xff1a;早期的RFID标签主要依赖于电磁感应线圈进行短暂供电&#xff0c;而现…

python中的assert语句

1.什么是assert 程序运行过程中,所有变量的当前值组合构成了“状态“; 每执行一段程序,状态就发生变化;如果程序有逻辑错误的bug,必定在处变量值的组合不符合预期,处于错误状态; 将对变量的预期写为断言,可以定位复杂的逻辑错误。 语法: assert <表达式> [, …

transition在vue2和vue3中的差异

背景&#xff1a; 在学习<transition/> 的时候&#xff0c;发现自己跟着视频抄写的代码&#xff0c;实现效果和示例代码不一致。 代码&#xff1a; <template><div id"app"><button id"btn" click"changeShow">切换…

Cholesky分解

Cholesky 应该怎么念&#xff0c;o(╯□╰)o&#xff0c;我感觉比较像‘瞅乐死骑’&#xff0c;毕竟这是 名字&#xff0c;哈哈哈哈 ATA 这个矩阵非常重要&#xff0c;之前在最小二乘法也见过它&#xff0c;如果&#xff1a; Axb 无解&#xff0c;也就是 xA−1b 不成立&…

随笔:创新的路径

最近&#xff0c;中国工业博览会在上海召开了&#xff0c;许多自动化行业的朋友都去参加这一场中国工业的盛会&#xff0c;兴奋地传来了各种新技术和新产品的消息。总的感觉国产产品集中度很高&#xff0c;长的都差不多。同质化现象比较严重。要实现产品的差异化&#xff0c;唯…

英伟达Blackwell系列显卡揭秘:RTX 5090与RTX 5080引领性能新高度

在万众瞩目的期待中&#xff0c;9月27日传来震撼消息&#xff0c;知名硬件信息揭秘者Kopite7kimi再次出手&#xff0c;独家披露了英伟达即将震撼登场的Blackwell系列显卡中的两款旗舰级产品——GeForce RTX 5090与RTX 5080的详细规格。这一爆料不仅揭示了英伟达新一代显卡的卓越…

企业微信:客户联系自带群发工具和聊天工具

前言 上篇博客介绍了一些客户联系的开启和配置&#xff0c;接下来我们来使用客户联系自带群发工具和聊天工具。 突然发现官方的文档已经很详细了&#xff0c;我这里给出一些简单的描述&#xff1a; 企业微信如何使用群发助手&#xff1f;-帮助中心-企业微信 群发工具 群发消息给…

Clipboard.js实现复制文本到剪贴板功能

一、Clipboard.js简介 Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件&#xff0c;该插件可以将输入框&#xff0c;文本域&#xff0c;DOM节点元素中的文本内容复制到剪贴板中。 官网地址&#xff1a;Clipboard.js 浏览器兼容性&#xff1a;兼容Chrome、…

第100+26步 ChatGPT学习:概率校准 Bayesian Binning into Quantiles

基于Python 3.9版本演示 一、写在前面 最近看了一篇在Lancet子刊《eClinicalMedicine》上发表的机器学习分类的文章&#xff1a;《Development of a novel dementia risk prediction model in the general population: A large, longitudinal, population-based machine-learn…

Kubernetes从零到精通(16-扩展-CRD、Custom Controller)

目录 一、简介 二、CRD 1.CRD介绍 2.CRD工作流程 三、Custom Controller 1.Custom Controller介绍 2.Custom Controller工作流程 四、示例 1.创建CR 2.配置权限RBAC 3.创建Custom Controller 3.1 Go项目初始化 3.2 main.go编写 3.3 构建镜像 3.4 部署Controller…

BaseCTF2024 个人WP

Pwn&#xff1a; [Week1] 签个到吧&#xff1a; 直接nc&#xff0c;ls&#xff0c;cat flag [Week1] echo&#xff1a; 只能使用echo命令 那就用echo *代替ls输出当前目录所有文件 用echo $(<flag)输出flag [Week1] Ret2text&#xff1a; 简单的栈溢出 from pwn impo…

10分钟,AI如何精准写出社会热点文?一篇爆款文章的背后你敢信?

本文背景 很多小伙伴们反馈&#xff0c;用AI输出的文章经常被平台判定为“疑似AI创作”&#xff0c;一但被判定&#xff0c;系统就不会给推荐流量。 到底在这个充斥着AI的大环境下&#xff0c;应该怎样完成AI文章的写作呢&#xff1f;特别是做流量主项目的小伙伴们&#xff0c;…

golang web笔记-3.响应ResponseWriter

简介 从服务器向客户端返回响应需要使用 ResponseWriter&#xff0c;ResponseWriter是一个接口&#xff0c;handler用它来返回响应。 ResponseWriter常用方法 Write&#xff1a;接收一个byte切片作为参数&#xff0c;然后把它写入到响应的body中。如果Write被调用时&a…