<el-table>设置一列为固定字段,其他列为循环生成

  <el-table :data="tableData" style="width: 100%"><el-table-columnprop="name"label="固定字段名":formatter="formatter"></el-table-column><el-table-columnv-for="(item, index) in wordsColumns":prop="item.name":label="item.label":key="index"></el-table-column></el-table>const tableData = ref([{date: '2016-05-02',id: '1',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',id: '2',name:'章三',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',id: '3',name: '李四',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',id: '4',name: '王五',address: '上海市普陀区金沙江路 1516 弄'}]
);const wordsColumns = [{ name: "name", label: "姓名" },{ name: "address", label: "地址" },{ name: "date", label: "时间" },
];const formatter = (row, column) => {console.log(row, column)switch (row.id) {case '1':return '用户1'case '2':return '用户2'case '3':return '用户3'case '4':return '用户4'}let newName = '用户' + row.namereturn newName
};

页面展示:

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

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

相关文章

从小白-入门-进阶-高阶,四个阶段详细讲解单片机学习路线!

大家好&#xff0c;今天给大家介绍从小白-入门-进阶-高阶&#xff0c;四个阶段详细讲解单片机学习路线&#xff01;&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 单片机学习路…

简单线程池的实现

线程池的代码可以写的很复杂&#xff0c;这里就稍微简单一些 首先来看一下线程池的原则&#xff0c;下面的大框是服务器&#xff0c;而在服务器中维护一个任务队列。 然后在server中预先创建一批线程&#xff0c;这批线程和任务队列合在一起只用向外界提供一个入队列的接口。 …

cesium vue 绘制标记实体(撒点),监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…

【热门话题】Yarn:新一代JavaScript包管理器的安装与使用

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Yarn&#xff1a;新一代JavaScript包管理器的安装与使用引言一、Yarn的安装1. 系…

MFC(一)搭建空项目

安装MFC支持库 创建空白桌面程序 项目相关设置 复制以下代码 // mfc.h #pragma once #include <afxwin.h>class MyApp : public CWinApp { public:virtual BOOL InitInstance(); };class MyFrame : public CFrameWnd { public:MyFrame();// 消息映射机制DECLARE_…

基于springboot+vue+Mysql的财务管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【spring】AbstractApplicationContext 的refresh() 方法学习

上一篇我们一起学习了【spring】FileSystemXmlApplicationContext 类学习 AbstractApplicationContext 的refresh() 方法介绍 AbstractApplicationContext的refresh()方法仍然是整个Spring应用程序上下文初始化的核心流程入口。大体上的刷新生命周期依然保持一致。 refresh(…

【IEEE ACCESS】论文发表记录

官网&#xff1a;IEEE Access&#xff1a;多学科开放获取期刊 期刊水平&#xff1a; IEEE Access - 中国科学院文献情报中心期刊分区表升级版 (fenqubiao.com) 时间轴&#xff1a; 第一次提交&#xff1a;2024 年 1 月 17 日 第一次结果&#xff1a;2024 年 2 月 27 日 拒…

为什么网页提示SSL证书不信任?

随着传统行业迅速融入互联网&#xff0c;信息安全问题逐渐凸显&#xff0c;企业商业机密和国家信息安全面临网络威胁。为应对此挑战&#xff0c;国内企业已积极部署SSL证书&#xff0c;强化信息安全防护&#xff0c;确保业务安全稳定运行。 在企业部署SSL证书的过程中&#xf…

网络服务练习题

综合练习&#xff1a;请给 openlab 搭建 web 网站 网站需求&#xff1a; 1. 基于域名 www.openlab.com 可以访问网站内容为 welcome to openlab!!! 2. 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于&#xff0c; www.openlab.c…

面向对象:继承

文章目录 一、什么叫继承&#xff1f;二、单继承三、多继承3.1多继承的各种情况3.1.1一般情况3.1.1特殊情况&#xff08;菱形继承&#xff09; 四、菱形继承引发的问题4.1 问题1:数据冗余4.2 问题2:二义性&#xff08;无法确定到底是访问哪个&#xff09; 五、虚拟继承解决菱形…

Java毕业设计-基于springboot开发的原创歌曲分享平台-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、平台功能模块2、后台功能模块2.1管理员功能模块2.2用户功能模块 四、毕设内容和源代码获取总结 Java毕业设计-基于springboot开…

威联通安装Kafka

最近在学习 Kafka 的知识&#xff0c;遇到一些问题网上搜到的信息不全。想要在本地安装一个 Kafka 进行验证&#xff0c;想到了之前买的 Nas 就开始折腾。 用 Docker 的方式安装 Kafka 现在的 Nas 很多都支持 Docker&#xff0c;我买的也支持。威联通的 Docker 叫 Container S…

基于vue的MOBA类游戏攻略分享平台的设计与实现|Springboot+Vue+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. …

Leo赠书活动-22期 【大模型在金融行业的应用场景和落地路径】文末送书

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

Go的数据结构与实现【Stack】

介绍 栈是存放值的一种特殊容器&#xff0c;在插入与删除值时&#xff0c;这种结构遵循后进先出&#xff08;Last-in-first-out&#xff0c;LIFO&#xff09;的原则&#xff0c;也就是说&#xff0c;值可以任意插入栈中&#xff0c;但每次取出的都是此前插入的最后一个值。 实…

Linux:详解TCP协议段格式

文章目录 认识TCPTCP协议段格式 本篇主要总结的是TCP协议的一些字段 认识TCP TCP协议全称是传输控制协议&#xff0c;也就是说是要对于数据的传输进行一个控制 以上所示的是对于TCP协议进行数据传输的一个理解过程 全双工 至此就可以对于TCP协议是全双工的来进行理解了&…

纸上得来终觉浅->代码详解锁升级

背景 最近再看关于锁升级的内容&#xff0c;一方面这个是编写代码时程序性能提高的一个利器&#xff0c;另一方面这部分也会是面试时候的热门话题。那么作者最开始也是通过b站视频包括一些csdn上面的资料去看&#xff0c;最终发现只是有一些结论&#xff0c;而没有具体的例子。…

​python学习之变量类型​

print单纯输中的十种数据类型只需要用print()函数即可&#xff0c;()里面直接写变量名。 下面重点介绍print格式输出&#xff1a; 第一种方法&#xff1a;一个萝卜一个坑&#xff0c;下面的代码中&#xff0c;{0}、{1}、{2}分别表示j,i,j*i&#xff0c;单引号里面是输出格式。…

什么是土壤墒情检测站?它在农业生产中有什么作用?

土壤墒情检测站是一种专门用于监测土壤水分状况和土壤水力性质的设备。它由多个传感器和数据采集单元组成&#xff0c;能够实时监测土壤中的水分含量、土壤温度等参数&#xff0c;并收集和记录相关的数据&#xff0c;提供土壤墒情&#xff08;即土壤水分状态&#xff09;的详细…