当前位置: 首页 > news >正文

vue3+elementui实现表格样式可配置

后端接口传回的数据格式如下图
在这里插入图片描述需要依靠后端传回的数据控制表格样式

实现代码

<!-- 可视化配置-表格 -->
<template><div class="tabulation_main" ref="myDiv"><!-- 尝试过在mounted中使用this.$refs.myDiv.offsetHeight,获取父元素高度赋值给height的方法,发现该值只能在created之前确定,且不为动态 --><el-table:data="tableData":stripe="tableStyleObj.tableStyle.stripe == 'true' ? true : false":row-style="rowStyleHandle":row-class-name="tableRowClassName":border="tableStyleObj.tableStyle.border == 'true' ? true : false"v-model:align="tableStyleObj.tableStyle.bodyTextAlign":show-header="tableStyleObj.tableStyle.showHeader == 'true' ? true : false":header-cell-style="{color: tableStyleObj.tableStyle.headerColor,'font-size': tableStyleObj.tableStyle.headerFontSize + 'px','text-align': tableStyleObj.tableStyle.headerTextAlign,}":header-row-class-name="headerRowClassName":height="tableStyleObj.tableStyle.tableHeight + ''"style="width: 100%"><!-- 固定序号列 --><el-table-columnv-if="tableStyleObj.tableStyle.isShowTableIndex == 'true' ? true : false":fixed="tableStyleObj.tableStyle.isTableIndexFixed == 'true' ? true : false"type="index":width="tableStyleObj.tableStyle.tableIndexWidth + ''"></el-table-column><el-table-columnv-for="(tableItem, tableIndex) in tableStyleObj.tableColStyle":key="tableIndex":prop="tableItem.prop":label="tableItem.label":width="tableItem.width + ''"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableStyleObj: {// 表格整体样式tableStyle: {},// 表格列配置tableColStyle: [],},tableData: [],};},props: {flatteningCurrentItemForm: {type: Object,default: () => {return {};},},},computed: {nthColor() {return this.tableStyleObj.tableStyle.nthColor;},othColor() {return this.tableStyleObj.tableStyle.othColor;},headerBackground() {return this.tableStyleObj.tableStyle.headerBackground;},},created() {// 获取表格配置this.tableStyleObj.tableStyle = this.flatteningCurrentItemForm.attributeCaseMap;this.tableStyleObj.tableColStyle = JSON.parse(this.flatteningCurrentItemForm.attributeCaseMap.tableColstyle);// 获取表格数据tableDataSource({dataSource: this.flatteningCurrentItemForm.dataSource,}).then((res) => {this.tableData = res.data;});},methods: {headerRowClassName({ row, rowIndex }) {return "head-row";},rowStyleHandle({ row, rowIndex }) {// rowIndex从0开始if (rowIndex % 2 == 0) {// 奇数行var obj = {"text-align": this.tableStyleObj.tableStyle.bodyTextAlign,color: this.tableStyleObj.tableStyle.bodyColor,"font-size": this.tableStyleObj.tableStyle.bodyFontSize + "px",};return obj;} else {// 偶数行var obj = {"text-align": this.tableStyleObj.tableStyle.bodyTextAlign,color: this.tableStyleObj.tableStyle.bodyColor,"font-size": this.tableStyleObj.tableStyle.bodyFontSize + "px",};return obj;}},tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 == 0) {return "even-row";} else {return "odd-row";}},},
};
</script><style scoped lang="scss">
.tabulation_main {// 表格表头::v-deep(.el-table .el-table__header-wrapper th),::v-deep(.el-table .el-table__fixed-header-wrapper th) {background-color: v-bind("headerBackground") !important;}// 表格斑马纹::v-deep(.even-row td) {background-color: v-bind("nthColor") !important;}::v-deep(.odd-row td) {background-color: v-bind("othColor") !important;}::v-deep(.el-table) {background-color: v-bind("nthColor") !important;}
}
</style>

相关文章:

vue3+elementui实现表格样式可配置

后端接口传回的数据格式如下图 需要依靠后端传回的数据控制表格样式 实现代码 <!-- 可视化配置-表格 --> <template><div class"tabulation_main" ref"myDiv"><!-- 尝试过在mounted中使用this.$refs.myDiv.offsetHeight,获取父元素…...

x11截屏源码(ubuntu18.04)

使用x11库实现截屏并保存为png图片 【shot.c】 // filename: shot.c #include <X11/Xlib.h> #include <X11/Xutil.h> #include <X11/Xatom.h> #include <X11/cursorfont.h> #include <png.h> #include <stdio.h> #include <stdlib.h>…...

【ComfyUI】MacBook Pro 安装(Intel 集成显卡)

文章目录 环境概述配置pip镜像配置pip代理git配置&#xff08;选配&#xff09;下载comfyUI代码创建、激活虚拟环境下载依赖安装torchvision启动comfyUI为什么Mac不支持CUDA&#xff0c;即英伟达的显卡&#xff1f;安装Intel工具包 环境 显卡&#xff1a;Intel Iris Plus Grap…...

HTTPS 加密全过程

加密协议以前是SSL,现在都是TLS, 而证书现在大多数都是SSL证书 抓包流程: TCP三次握手过后, 客户端发送Client Hello 服务器相应Server Hello 服务器再次响应发送证书: 服务器再发送公钥:...

联邦学习综述二

联邦学习漫画 联邦学习漫画链接: https://federated.withgoogle.com/ Federated Analytics: Collaborative Data Science without Data Collection 博客链接: https://blog.research.google/2020/05/federated-analytics-collaborative-data.html 本篇博客介绍了联邦分析&a…...

Idea本地跑flink任务时,总是重复消费kafka的数据(kafka->mysql)

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 Idea中执行任务时&#xff0c;没法看到JobManager的错误&#xff0c;以至于我以为是什么特殊的原因导致任务总是反复消费。在close方法中&#xff0c;增加日志&#xff0c;发现jdbc连接被关闭了。 重新…...

基于nodemailer实现邮件发送

概述 node中可用nodemailer实现邮件的发送。本文使用QQ邮箱实现邮件的发送。 实现效果 实现 1. QQ邮箱配置 首先需要开启POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务&#xff0c;如下图所示。 生成授权码 2. 发送邮件 发送邮件的代码比较简单&#xff0c;如下&#xf…...

【PostgreSQL内核学习(十八)—— (数据库表参数)】

数据库表参数 default_reloptions 函数案例 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的情况下注明引用来源。 本文主要参考了《PostgresSQL数据库内核…...

区块链的两个核心概念之一签名, 另一个是共识.

Alice的公私钥&#xff0c; 签名和验证签名仅仅确定了Alice对数字资产A所有权的宣言. 之后, Bob也可以用自己的私钥对资产A进行签名宣誓所有权。区块链中叫双花&#xff0c;即重复宣称所有权&#xff0c; 也称重复花费交易。这时候需要共识算法(集体成员pow或委员会代表pos监督…...

wpf中prism框架切换页面

主页面...

正则表达式(Regular Expression)学习网址分享

正则表达式&#xff08;Regular expressions&#xff0c;也叫REs、 regexs 或regex patterns&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xf…...

【已解决】socket.gaierror: [Errno -3] Temporary failure in name resolution

问题描述 今天在环境迁移的过程中遇到多个问题&#xff0c;包括ModuleNotFoundError: No module named flask&#xff0c;socket.gaierror: [Errno -3] Temporary failure in name resolution以及Downloading: "https://huggingface.co/gyrojeff/YuzuMarker.FontDetection…...

CUDA code=700(cudaErrorIllegalAddress) 报错与排查方法

CUDA code700(cudaErrorIllegalAddress) 报错与排查方法 最近笔者在调试自己写的 CUDA 代码时, 遇到了 code700(cudaErrorIllegalAddress) 的报错, 在此记录一下排查和解决方法. 报错 报错是由 CUDA API 函数执行时产生的, 由 checkCudaErrors() 函数检测出(CUDA 常用错误检…...

项目管理过程组

项目管理有2条主线&#xff0c;一条是技术&#xff0c;一条是管理。项目过程由项目团队实施。一般术语以下两大类之一&#xff1a;一类是项目管理过程。另一类是面向产品的过程。在大多数情况下&#xff0c;大多数项目都有共同的项目管理过程。它们通过有目的的实施而互相联系起…...

python每日一练(5)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…...

经典循环命题:百钱百鸡

翁五钱一只&#xff0c;母三钱&#xff0c;小鸡三只一钱&#xff1b;百钱百鸡百鸡花百钱。 (本笔记适合能熟练应用for循环、会使if条件分支语句、能格式化字符输出的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a…...

IDEA使用模板创建webapp时,web.xml文件版本过低的一种解决方法

创建完成后的web.xml 文件&#xff0c;版本太低 <!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Appl…...

在Openresty中使用lua语言向请求浏览器返回请求头User-Agent里边的值

可以参考《Linux学习之Ubuntu 20.04在https://openresty.org下载源码安装Openresty 1.19.3.1&#xff0c;使用systemd管理OpenResty服务》安装Openresty。 然后把下边的内容写入到openresty配置文件/usr/local/openresty/nginx/conf/nginx.conf&#xff08;根据实际情况进行选…...

Hive面试常见基础问题

以下是一些Hive面试问题和答案&#xff1a; Hive是什么&#xff1f; 答&#xff1a;Hive是一个开源的数据仓库工具&#xff0c;用于处理和分析大规模结构化数据。它能够创建、修改和查询表结构&#xff0c;支持多种数据类型和查询操作&#xff0c;同时提供数据汇总和数据查询的…...

设计模式 - 观察者模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 观察者模式属于行为型模式。在程序设计中&#xff0c;观察者模式通常由两个对象组成&#xff1a;观察者和被观察者。当被观察者状态发生改变时&#xff0c;它会通知所有的观察者对象&#xff0c;使他们能够及时做出响应&#xf…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...