vue框架学习 -- 表单开发之页面自定义显示值

在 Vue 2.0 中,如果在使用 Element UI 的 组件,并希望自定义 中显示的 prop 属性的值(比如,
memberName),有几种方法可以实现这一点。最直接的方法之一是在 Vue 组件的 data 函数或计算属性(computed properties)中处理这些数据,然后通过模板语法展示处理后的值。

示例 1:使用计算属性

假设有一个包含值班人员信息的数组 dutyMembers,每个对象可能包含一个 name 字段,但想在表格中显示为 memberName(可能为了与其他部分的代码保持一致,或者需要添加一些前缀/后缀)。

可以通过创建一个计算属性来返回一个新的数组,这个数组中的每个对象都包含希望显示的 memberName。


export default {  data() {  return {  // 原始数据  dutyMembers: [  { id: 1, name: '张三' },  { id: 2, name: '李四' }  ]  };  },  computed: {  // 计算属性,用于返回修改后的数据  tableData() {  return this.dutyMembers.map(member => ({  ...member, // 保留原始对象的其他属性  memberName: `值班人员:${member.name}` // 自定义显示值  }));  }  }  
}

然后,在模板中,可以这样使用 <el-table><el-table-column>

<el-table :data="tableData" style="width: 100%">  <el-table-column label="值班人员" align="center" prop="memberName" />  
</el-table>

示例 2:使用作用域插槽(Scoped Slots)

如果想要更灵活的控制单元格的渲染(比如,添加按钮或链接),可以使用作用域插槽(在 Element UI 中称为 scoped slots)。不过,对于简单的文本自定义,使用计算属性通常更简洁。但这里提供一个使用作用域插槽的示例,以展示其灵活性。

<el-table :data="dutyMembers" style="width: 100%">  <el-table-column label="值班人员" align="center">  <template slot-scope="scope">  <span>{{ '值班人员:' + scope.row.name }}</span>  </template>  </el-table-column>  
</el-table>

注意:在 Vue 2.6.0+ 和 Element UI 的较新版本中,slot-scope 被废弃,取而代之的是 v-slot 指令。因此,上面的作用域插槽代码可以更新为:

<el-table-column label="值班人员" align="center">  <template v-slot="scope">  <span>{{ '值班人员:' + scope.row.name }}</span>  </template>  
</el-table-column>

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

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

相关文章

HTML5实现唐朝服饰网站模板源码

文章目录 1.设计来源1.1 网站首页-界面效果1.2 唐装演变-界面效果1.3 唐装配色-界面效果1.4 唐装花纹-界面效果1.5 唐装文化-界面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcL…

【Kubernetes】常见面试题汇总(四十一)

目录 94. iptables 四个表五个链。 95. Kubernetes 如何简化容器化部署&#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属于【Kuber…

TikTok直播:选择TK直播盒子还是专线节点?

随着短视频平台的蓬勃发展&#xff0c;TikTok&#xff08;抖音国际版&#xff09;直播已成为主播和商家推广产品、增强与观众互动的重要手段。在这一过程中&#xff0c;选择合适的直播工具和技术方案显得尤为重要。对于希望在TikTok上取得成功的主播而言&#xff0c;使用TK直播…

JSON 教程

JSON 教程 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> …

UE虚幻引擎云渲染汽车动画的优势!

在汽车广告和动画制作领域&#xff0c;虚幻引擎&#xff08;UE&#xff09;结合云渲染技术正掀起一场技术革命。这项技术以其高性能、成本效益和灵活性&#xff0c;为创作者提供了强大的工具&#xff0c;以实现更加逼真和高效的汽车动画制作。 一、为什么选择UE虚幻引擎制作汽车…

学习笔记每日一题

给你一个整数 n &#xff0c;找出从 1 到 n 各个整数的 Fizz Buzz 表示&#xff0c;并用字符串数组 answer&#xff08;下标从 1 开始&#xff09;返回结果&#xff0c;其中&#xff1a; answer[i] "FizzBuzz" 如果 i 同时是 3 和 5 的倍数。answer[i] "Fizz…

2024年厦门市大数据创新应用大赛圆满收官

2024年厦门市大数据创新应用大赛圆满收官 2024年9月19日-20日&#xff0c;由厦门市数据管理局、厦门市公安局、厦门市生态环境局联合主办&#xff0c;厦门市信息中心承办的2024年厦门市大数据创新应用大赛圆满收官。 经专家评审团评审 最终决出获奖名单 决赛评审会现场 2024年…

PMI-ACP®认证考试内容将于2025年第一期考试更新

PMI敏捷管理专业人士&#xff08;PMI-ACP&#xff09;认证即将在2025年迎来引入中国大陆的十周年纪念。 十年时间&#xff0c;我们见证了敏捷实践方法普及和敏捷项目管理的“知行合一”&#xff0c;采用敏捷方法的中国企业团队比例的快速持续增长&#xff0c;中国PMI-ACP专业人…

HarmonyOS 自定义 loading 效果

大致思路 主要利用 Progress 组件 利用aboutToAppear周期函数&#xff1a;在创建自定义组件的新实例后&#xff0c;在执行其build()函数之前执行 利用aboutToDisappear函数在自定义组件析构销毁之前执行&#xff0c;这里主要用来清除定时器 实现效果 组件封装 components/H…

【pytorch】pytorch入门4:神经网络的卷积层

文章目录 前言一、定义概念 缩写二、性质三、代码总结参考文献 前言 使用 B站小土堆课程的笔记 一、定义概念 缩写 卷积层是神经网络中用于突出特征来进行分类任务的层。 二、性质 卷积核例子&#xff1a;vgg16 model 三、代码 添加库 python代码块import os import …

大屏可视化px转rem方案实现

该方案有点不会字体模糊&#xff0c;现实一比一扩张收缩。 参考&#xff1a;vue项目实现PC端各分辨率适配 - 李云蹊 - 博客园 (cnblogs.com) 注意该文章Vue项目使用webpack。 如果 如果 如果 你用的是Vuevite Vite Vite Vite需要修改 postcss.config.js 文件 import autopr…

linux:chown用法详解

文章目录 1. 描述2. 语法3. 参数4. 例子 1. 描述 chown 是 Linux 中用于更改文件或目录的所有者和所有者组的命令。 2. 语法 chown [选项] 所有者[:组] 文件名详细用法&#xff1a; Usage: chown [OPTION]... [OWNER][:[GROUP]] FILE...or: chown [OPTION]... --reference…

机器人顶刊IEEE T-RO发布无人机动态环境高效表征成果:基于粒子的动态环境连续占有地图

摘要&#xff1a;本研究有效提高了动态环境中障碍物建模的精度和效率。NOKOV度量动作捕捉系统助力评估动态占用地图在速度估计方面的性能。 近日&#xff0c;上海交通大学、荷兰代尔夫特理工研究团队在机器人顶刊IEEE T-RO上发表题为Continuous Occupancy Mapping in Dynamic …

vue是如何优化

Vue的性能优化是一个涉及多个方面的综合过程&#xff0c;旨在提高Vue应用的运行效率和用户体验。以下是一些关键的Vue优化策略&#xff1a; 1. 代码层面的优化 a. 使用函数式组件 函数式组件相比普通组件没有状态&#xff08;没有响应式数据&#xff09;和实例&#xff08;没…

『功能项目』鼠标悬停物品显示信息【77】

本章项目成果展示 我们打开上一篇763D模型动态UI显示的项目&#xff0c; 本章要做的事情是鼠标悬停在道具身上显示对应信息 首先制作一个武器Image信息面板 重命名为WeaponUI01 设为隐藏 修改脚本&#xff1a;RightClickItem.cs 查看挂载脚本&#xff1a; 运行项目 - 当鼠标悬…

多线程计算π

1、实现单线程计算π 2、使用任务分解方法,使用2线程,并行计算π 3、使用数据分解方法,使用2线程,并行计算π 注意:在循环中使用以上计算π的公式,n取值为1到Int.Max 问题1: import java.lang.*;public class Thread1 extends Thread{@Overridepublic void run(){l…

个性化大语言模型:PPlug——让AI更懂你

在当今数字化转型的时代&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已经成为了不可或缺的工具&#xff0c;它们在自然语言理解、生成和推理方面展现了非凡的能力。然而&#xff0c;这些模型普遍采用的是“一刀切”的方式&#xff0c;即对于相同的输入给予所有用户相…

HDFS分布式文件系统01-HDFS架构与SHELL操作

HDFS分布式文件系统 学习目标第一课时知识点1-文件系统的分类单机文件系统网络文件系统分布式文件系统 知识点2-HDFS架构知识点3-HDFS的特点知识点4-HDFS的文件读写流程知识点5-HDFS的健壮性 第二课时知识点1-HDFS的Shell介绍HDFS Shell的语法格式如下。HDFS Shell客户端命令中…

db2 存储过程 if的例子及call调用方法

if 需要 end if; CREATE PROCEDURE UPDATE_SAL (IN empNum CHAR(6), OUT rating SMALLINT)LANGUAGE SQLBEGINIF rating 1 THENUPDATE employee SET salary salary * 1.10, bonus 1000 WHERE empno empNum;ELSEIF rating 2 THENUPDATE employee SET salary salary * …

windows电脑C盘内存爆满怎么办?

目录 1. 下载SpaceSniffer2. 运行程序&#xff0c;扫描C盘3. 寻找可删除的文件 为了节省C盘的内存&#xff0c;将大部分的软件尽量都安装在C盘以外的磁盘中&#xff0c;但是在电脑的使用过程中还是会发现C盘越来越少&#xff0c;这是因为很多软件会默认将数据文件夹&#xff08…