自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮

自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮

自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮

<template><div class="box"><el-table :data="msgMapList" border class="table"><el-table-column v-for="column in titleMapList" :key="column.code" :prop="column.propFlag" :label="column.value"><template #header="{ column }"><div><span>{{ column.label }}</span><button v-if="column.property === '1'">按钮</button></div></template><template #default="{ row }"><div :class="getColumnStyle(column, row)">{{ row[column.code] }}</div><!-- <divv-if="column.symbol == 1":class="row[column.compareOne] == row[column.compareTwo]? column.class: ''">{{ row[column.code] }}</div> --></template></el-table-column></el-table></div>
</template><script>
export default {props: {titleMapList: {type: Array,},msgMapList: {type: Array,},type: {type: String,},},data() {return {mainSource: "",};},mounted() {this.titleMapList.forEach((item) => {if (item.isMain === "1") {this.mainSource = item.code;return;}});},methods: {getColumnStyle(column, row) {console.log("this.type------", this.type);if (this.type === "2") {// 变色 居右if (column.colorFlag === "1" &&row[column.code] != row[this.mainSource]) {return "color-class table-left";}// 不变色 居右if (column.isMain === "1" || column.colorFlag === "1") {return "table-left";}} else {if (column.colorFlag === "1") {if (row[column.code] != row[this.mainSource]) {return "color-class"; //'color-class'}}}},},
};
</script>
  • 注意:表头插槽拿到的column 和内容插槽拿到的内容不一致,header插槽的label对应el-table-column的label,prop对应header插槽的property

效果:

在这里插入图片描述

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

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

相关文章

Java入门篇 之 逻辑控制(练习题篇)

博主碎碎念: 练习题是需要大家自己打的请在自己尝试后再看答案哦&#xff1b; 个人认为&#xff0c;只要自己努力在将来的某一天一定会看到回报&#xff0c;在看这篇博客的你&#xff0c;不就是在努力吗&#xff0c;所以啊&#xff0c;不要放弃&#xff0c;路上必定坎坷&#x…

k8s约束调度其二

一&#xff0c;Pod亲和性与反亲和性 调度策略匹配标签操作符拓扑域支持调度目标nodeAffinity主机In, NotIn, Exists,DoesNotExist, Gt, Lt 否 指定主机podAffinityPodIn, NotIn, Exists,DoesNotExist是Pod与指定PodpodAntiAffinityPodIn, NotIn, Exists,DoesNotExist是Pod与指…

java8利用Stream方法求两个List对象的交集、差集与并集(即:anyMatch和allMatch和noneMatch的区别详解)

1、anyMatch 判断数据列表中是否存在任意一个元素符合设置的predicate条件&#xff0c;如果是就返回true&#xff0c;否则返回false。 接口定义&#xff1a; boolean anyMatch(Predicate<? super T> predicate); 方法描述&#xff1a; 在anyMatch 接口定义中是接收 P…

c++ Vector 学习

vevtor 是c 中自带得动态数组&#xff0c;dynamic array array can hold different values/objects of same type 可以装不同得类型或者对象 dynamic size can be changed at runtime 可以运行得时候改变 要使用的话&#xff0c;先引入 #include <vector> std::vector…

Kafka基本原理、生产问题总结及性能优化实践 | 京东云技术团队

Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、支持分区的&#xff08;partition&#xff09;、多副本的&#xff08;replica&#xff09;&#xff0c;基于zookeeper协调的分布式消息系统&#xff0c;它的最大的特性就是可以实时的处理大量数据以满足各种需求场景&a…

Mac 解决 APP 快捷键冲突

打开 Mac 系统设置键盘->键盘快捷键->App快捷键->添加快捷键&#xff08;加号&#xff09;->标题需要和tab名称完全一致&#xff08;包括中英文、标点符号等&#xff0c;如下图&#xff09;设置快捷键即可 Reference&#xff1a; https://www.cnblogs.com/Questio…

考前须知-11月软考机考

1、11月4-5日考试有几个时间点需注意&#xff1a; 考前40分钟&#xff0c;应试人员应到达准考证上所指定的考点&#xff0c;凭本人准考证和有效证件&#xff08;居民身份证、社会保障卡、港澳台居民身份证明、外籍人员护照、外国人永久居留证明&#xff09;原件进入进入本资格…

算法通关村第五关|青铜|基于链表实现队列

基于链表实现队列 public class LinkQueue {// front的next指向首部结点private Node front;// rear记录尾部结点private Node rear;private int size;public LinkQueue() {this.front new Node(0);this.rear new Node(0);}// 入队public void push(int value) {Node newNod…

分析报告有样板了-奥威BI数据可视化报表模板

述职报告、月度数据分析报告、季度数据分析报告、区域数据分析报告……人在职场&#xff0c;数据分析报告少不了。那么&#xff0c;怎么才能在极短的时间内做出一张既好看又突出重点、分析逻辑在线的数据可视化分析报表&#xff1f;奥威BI软件的建议是采用BI数据可视化报表模板…

成本中心修改后推送其他SAP系统更新成本中心(ALE)

成本中心修改后推送给其他系统 KSH2成本中心组新增成本中心&#xff08;服务器A 400client&#xff09; KAVB 输入成本中心组、控制范围、目标系统 Y 查看&#xff08;服务器B 430client&#xff09;

数字化时代,谈谈数据资产这件事

在全球数字化转型的大趋势下&#xff0c;数据交易市场有望推动数据要素价值的开放共享和流通。据信通院测算&#xff0c;2021年全球47个重要经济体的数字经济增加值规模高达 38.1 万亿美元&#xff0c;我国2021年数字经济规模也已达到7.1万亿美元。数据之于数字经济的价值不言而…

科技云报道:打造生成式AI应用,什么才是关键?

科技云报道原创。 生成式AI作为当前人工智能的前沿领域&#xff0c;全球多家科技企业都在加大生成式AI的研发投入力度。 随着技术、产品及应用等方面不断推出重要成果&#xff0c;如今有更多的行业用户在思考该如何将生成式AI应用落地。 但开发生成式AI应用是一个充满挑战的…

php中时间段查询时间段

前言&#xff1a; 当使用一个时间段&#xff0c;例如&#xff1a;start_date 2023-11-02&#xff0c;end_date 2023-11-15&#xff0c;去数据库表中查询start_date 2023-11-01&#xff0c;end_date 2023-11-14&#xff0c;只要搜索条件中的时间段和数据库表中的时间段存在…

关于嵌入式rtthread系统与单片机芯片

简介 我估计已经有很久没更新了&#xff0c;近一年都在某个国企里工作&#xff0c;我做的就是嵌入式工程师的岗位&#xff0c;最近才刚刚退出来&#xff0c;想来说说自己的工作使用的软件和系统。 本身进公司的时候&#xff0c;其实做的就是写单片机的板子的程序的工作&#x…

USB学习相关资料

USB DFU&#xff1a; 官方文档&#xff1a; dfu-util 主页 (sourceforge.net) DFU-UTIL型 (sourceforge.net) 协议资料&#xff1a; DFU_1.1.doc (usb.org)

破局:如何从产业角度锻造企业不败竞争优势?

引言&#xff1a;究竟是坚守过去的辉煌,还是勇敢拥抱未来的变化?柯达的沉沦与富士胶片的崛起,揭示企业如何通过深刻理解自身的核心竞争力&#xff0c;利用产业战略的转变来实现持续发展。从产品竞争到产业升级,这不仅仅是一场商业竞赛的变革&#xff0c;更是一次企业战略思维的…

方阵行列式与转置矩阵

1.转置矩阵&#xff1a;格式规定&#xff1a;如果矩阵A为n阶方阵&#xff0c;那么A的T次方为矩阵A的转置矩阵&#xff0c;即将矩阵A的行与列互换。 2.转置矩阵的运算性质&#xff1a; 1.任何方阵的转置矩阵的转置矩阵为方阵自身。 2.多个矩阵的和的转置矩阵等于多个转置矩阵的…

第24期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

Linux0.11内核源码解析-exec.c

主要实现对二进制可执行文件和shell文件的加载和执行&#xff0c;其中主要的函数是do_execve(),它是系统中断调用int 0x80的功能号__NR_execve()调用&#xff0c;是exec()函数的主要实现以下几点功能&#xff1a; 1.执行对参数和环境参数空间页面的初始化操作&#xff0c;初始…

基于51单片机的智能指纹考勤系统设计

**单片机设计介绍&#xff0c;1661【毕设课设】基于51单片机的智能指纹考勤系统设计-原理图-PCB-程序-报告 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于51单片机的智能指纹考勤系统是一种利用51单片机作为主控芯片&#x…