vue3 elementUi table自由渲染组件
文章目录
- 前言
- CustomTable
- 如何使用
- tableColumn 属性
- h函数
- 创建原生元素
- 创建组件
- 动态生成
前言
elementui中的table组件,表格中想要自由地渲染内容,是一种比较麻烦的事情,比如你表格中想要某一列插入一个button按钮,是不是要用插槽,那下一次某一列插入一个图片,又得新开一种插槽或者类别。
那么,有没有什么方法,能够通过配置,直接配置一个组件的方式,让表格的那一列直接渲染对应的组件。elementui table中并不提供这样的配置。所以需要开发人员自己封装。
CustomTable
在element UI 中Table组件的基础上,封装一个可以自定义渲染的table
<template><!-- 表格 --><el-table:data="tableData"v-loading="loading":empty-text="'暂无数据'"v-bind="$attrs"><!-- :border="true" --><template v-for="column in tableColumn" :key="column?.label"><el-table-column v-if="column.cols" v-bind="{ ...column }"><!-- 列名合并,存在cols的情况下 --><template v-for="col in column.cols" :key="column?.label + col?.label"><el-table-column v-bind="{ ...col }"><template #default="scope"><!-- 自定义render --><span v-if="col?.render" :class="col?.class" :style="col?.style ? col.style : {}">{{ col?.render(scope.row[col.prop], scope.row) }}</span><!-- 自定义render component 将当前列的数据和这一整行的数据都传给component函数 --><div v-else-if="col?.component" v-html="renderVNode(col.component(scope.row[col.prop], scope.row))"> </div><spanv-else:style="col?.style ? col.style : {}":class="col?.class":title="scope.row[col.prop]":data-message="scope.row[col.prop]">{{ scope.row[col.prop] }}</span></template></el-table-column></template></el-table-column><el-table-column v-else v-bind="{ ...column }"><template #default="scope"><!-- 自定义render字符串 当前列的数据和这一整行的数据都传给render函数--><span v-if="column?.render" :style="column?.style ? column.style : {}" :class="column?.class">{{ column?.render(scope.row[column.prop], scope.row) }}</span><!-- 自定义render component 将当前列的数据和这一整行的数据都传给component函数 --><div v-else-if="column?.component" v-html="renderVNode(column.component(scope.row[column.prop], scope.row))"></div><spanv-else:style="column?.style ? column.style : {}":class="column?.class":title="scope.row[column.prop]":data-message="scope.row[column.prop]">{{ scope.row[column.prop] }}</span></template></el-table-column></template></el-table>
</template><script lang="ts" setup name="customTable">const props = defineProps({tableData: {type: Array,default: () => [],},tableColumn: {type: Array<any>,default: () => [],},loading: {type: Boolean,default: false,},});const generateRandomString = (length) => {const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';const charactersLength = characters.length;let result = '';for (let i = 0; i < length; i++) {const randomIndex = Math.floor(Math.random() * charactersLength);result += characters.charAt(randomIndex);}return result;};
// 通过renderVNode 接收一个vnode节点来渲染component
const renderVNode = (vnode: VNode) => {const tempDiv = document.createElement('div');const parentDiv = document.createElement('div');const id = generateRandomString(10);parentDiv.appendChild(tempDiv);tempDiv.id = id;// 利用createApp和render将vnode挂载成一个新的appconst Comp = createApp({render: () => vnode,});// 将这个新的vue app 挂载到对应的dom上nextTick(() => {// 但要放置到nextTick里面,以防止dom还没放置到table的对应位置,就先挂在了Comp.mount('#' + id);});// 返回一个html dom ,利用v-html挂载到table中对应的位置return parentDiv.innerHTML;};
</script >
如何使用
<template><custom-table maxHeight="100vh" :tableColumn="tableColumn" :tableData="tableData" />
</template><script lang="ts" setup name="test">
import componentTest from '../componentTest.vue';
import customTable from '../components/customTable.vue';
const tableColumn = ref([{label: '名称',prop: 'name',align: 'center',minWidth: 130,fixed: true,component: (value, row) => {return h('div', { onClick: () => handleClick(row?.name) }, [h('span', { style: { fontSize: '14px', display: 'inline-block' } }, value),h('p', { class: 'dealer-scale' }, row?.scale),]);},},{label: '订单',prop: 'order',component: (value, row) => {return h(componentTest, {title: value})},style: { color: '#C00017' },},{ label: '本年', prop: 'open', style: { color: '#C00017' } },{ label: '费效比', prop: 'efficiency', style: { color: '#038810' },render: (value,rows) => {console.log(value, rows)return value + '%'}},{ label: '处罚', prop: 'punish', style: { color: '#0000aa' } },]);const tableData = ref([// name order open efficiency punish scale{name: 'xxxx有限公司',order: '23455 万',open: '234 万瓶',efficiency: '1.3 %',punish: '3 次',scale: '10亿以上',},{name: '软件有限公司',order: '23456 万',open: '234 万瓶',efficiency: '1.3 %',punish: '3 次',scale: '5千万~1亿',},]);
</script>
tableColumn 属性
属性名 | 类型 | 解释 |
---|---|---|
style | string | 能够单独配置某一列的样式 |
class | string | 能够单独配置某一列的class名称 |
render | function | 接受两个参数 (value, row) value是当前行当前列的数据,row是当前行的数据 返回的值会渲染在table对应的列中 |
component | function | 接受两个参数 (value, row) value是当前行当前列的数据,row是当前行的数据,返回一个vnode,通过vue3自带的h函数实现 |
fixed | boolean | 是否让当且列固定 |
… | … | … |
剩下的属性 | … | 查看element ui 中table 的Column配置 https://element.eleme.io/#/zh-CN/component/table#table-column-attributes |
h函数
function h(type: string | Component, // 元素/组件类型props?: object | null, // 属性/Propschildren?: VNodeChildren // 子节点(字符串、数组、插槽等)
): VNode
创建原生元素
import { h } from 'vue'// 等价于 <div class="box" id="app">Hello</div>
h('div', { class: 'box', id: 'app' }, 'Hello')// 带事件
h('button', { onClick: () => console.log('Clicked!') }, 'Click me')
创建组件
import MyComponent from './MyComponent.vue'// 传递 props 和插槽
h(MyComponent, { title: 'Demo',onClick: () => {} // 监听自定义事件
}, {default: () => h('span', '默认插槽'),footer: () => h('div', 'Footer 内容')
})
动态生成
const items = ['A', 'B', 'C']
h('ul', items.map(item => h('li', item))
)
相关文章:
vue3 elementUi table自由渲染组件
文章目录 前言CustomTable如何使用tableColumn 属性h函数创建原生元素创建组件动态生成 前言 elementui中的table组件,表格中想要自由地渲染内容,是一种比较麻烦的事情,比如你表格中想要某一列插入一个button按钮,是不是要用插槽…...
Centos离线安装gcc
文章目录 Centos离线安装gcc1. gcc是什么?2. gcc下载地址3. gcc的安装4. 安装结果验证 Centos离线安装gcc 1. gcc是什么? GCC(GNU Compiler Collection)是 GNU 项目下的开源编译器套件,主要用于将 C、C 等编程语言的源…...
odbus TCP转Modbus RTU网关快速配置案例
Modbus TCP 转Modbus RTU网关快速配置案例 在工业自动化领域,Modbus 协议以其简洁和高效而著称,成为众多设备通信的首选。 随着技术的发展和应用场景的变化,Modbus 协议也发展出了不同的版本,其中 Modbus TCP 和 Modbus RTU 是两种…...
Unity3D开发AI桌面精灵/宠物系列 【一】 窗口透明化 背景剔除 、去边框、去Logo动画UI正常显示
Unity3D 交互式AI桌面宠物开发系列【一】 文章主要介绍怎么制作AI桌面宠物的流程,我会从项目开始创建初期到最终可以和AI宠物进行交互为止,项目已经开发完成,我会仔细梳理一下流程,分步讲解。 这篇文章主要讲初期一些设置和部署。…...
Vue 自定义指令深度解析与应用实践
文章目录 1. 自定义指令概述1.1 核心概念1.2 指令生命周期 2. 自定义指令基础2.1 指令注册2.2 指令使用 3. 指令钩子函数详解3.1 钩子函数参数3.2 钩子函数示例 4. 自定义指令应用场景4.1 表单自动聚焦4.2 权限控制4.3 图片懒加载 5. 高级应用技巧5.1 动态指令参数5.2 指令修饰…...
基于SpringBoot+Vue的幼儿园管理系统+LW示例参考
1.项目介绍 系统角色:管理员、教师、普通用户功能模块:用户管理、教师管理、班级管理、幼儿信息管理、会议记录管理、待办事项、职工考核、请假信息、缴费信息、体检管理、资源管理、原料管理、菜品信息管理等技术选型:SpringBoot࿰…...
超级课程表项目结尾
L3-17-05-main.py def __init__(self):app QApplication([])self.window QMainWindow()self.window.setWindowTitle("超级课程表")cusWidget CourseWidget()self.window.setCentralWidget(cusWidget)self.showCourse()self.showNotes()# 1. 创建菜单栏self.menuba…...
Spring Retry
1. Spring Retry 的工作原理 内部机制 Spring Retry 主要通过 AOP(面向切面编程)实现重试逻辑。以下是 Spring Retry 的内部工作流程: AOP 拦截器:当一个方法被标记为需要重试,并且该方法抛出了指定类型的异常时&am…...
16.使用读写包操作Excel文件:XlsxWriter 包
一 XlsxWriter 的介绍 XlsxWriter 只能写入 Excel 文件。 OpenPyXL 和 XlsxWriter 的区别在笔记 15 。 二 如何使用 XlsxWriter 1.导包 import datetime as dtimport xlsxwriterimport excel 2.实例化工作簿 book xlsxwriter.Workbook("xlxswriter.xlsx") book.clo…...
【最新版】智慧小区物业管理小程序源码+uniapp全开源
一.系统介绍 智慧小区物业管理小程序,包含小区物业缴费、房产管理、在线报修、业主活动报名、在线商城等功能。为物业量身打造的智慧小区运营管理系统,贴合物业工作场景,轻松提高物业费用收缴率,更有功能模块个性化组合,助力物业节约成本高效运营。 二.搭建环境 系统环…...
音视频入门基础:RTP专题(18)——FFmpeg源码中,获取RTP的音频信息的实现(上)
由于本文篇幅较长,分为上、下两篇。 一、引言 通过FFmpeg命令可以获取到SDP描述的RTP流的的音频压缩编码格式、音频压缩编码格式的profile、音频采样率、通道数信息: ffmpeg -protocol_whitelist "file,rtp,udp" -i XXX.sdp 而由《音视频入门…...
基于SpringBoot+Vue的驾校预约管理系统+LW示例参考
1.项目介绍 系统角色:管理员、普通用户、教练功能模块:用户管理、管理员管理、教练管理、教练预约管理、车辆管理、车辆预约管理、论坛管理、基础数据管理等技术选型:SpringBoot,Vue等测试环境:idea2024,j…...
基于k3s部署Nginx、MySQL、PHP和Redis的详细教程
先决条件 一台Linux服务器(或本地虚拟机),建议Ubuntu/CentOS基础命令行操作能力确保服务器有至少2GB内存和10GB磁盘空间 1. 安装k3s(极简Kubernetes) 1.1 一键安装 # 用root用户或sudo权限执行以下命令 curl -sfL h…...
21.多态
一、多态概念 多种形态。 静态多态:编译时多态。(函数重载) 动态多态:运行时多态。(继承关系下,调用父类指针或引用,对于不同的对象有不同的行为) 二、多态的定义及实现 1ÿ…...
无再暴露源站!群联AI云防护IP隐匿方案+防绕过实战
一、IP隐藏的核心原理 群联AI云防护通过三层架构实现源站IP深度隐藏: 流量入口层:用户访问域名解析至高防CNAME节点(如ai-protect.example.com)智能调度层:基于AI模型动态分配清洗节点,实时更新节点IP池回…...
新版AndroidStudio / IDEA上传项目到Gitee
目录 1.Gitee创建仓库 2.填写仓库的信息 3.创建成功后复制仓库的地址 4.检查AndroidStudio是否配置Git 5.点击测试 6.之后Create Git Repository 7.添加到本地仓库 8.提交项目 9.添加上传仓库的地址 10.上传成功 11.去Gitee上刷新检查 1.Gitee创建仓库 2.填写仓库的…...
学习threejs,使用MeshFaceMaterial面材质容器
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.MeshFaceMaterial 二…...
python微分方程求解,分别用显式欧拉方法、梯形法、改进欧拉方法、二阶龙格库塔方法、四阶龙格库塔方法求解微分方程
微分方程在自然科学、工程技术、社会科学等多个领域都有着广泛而重要的应用。而求解微分方程是数学与应用数据领域一大难题,对于一些复杂的微分方程无法通过计算推导计算其精确的方程表达式与 结果,因此,我们通过数学理论。迭代,微…...
【ubuntu】——wsl中使用windows中的adb
一、引言 在 Windows Subsystem for Linux(WSL)环境下工作时,有时需要使用 Android Debug Bridge(ADB)工具与 Android 设备进行交互。通过特定设置,能够在 WSL 中便捷地调用 Windows 系统中已安装的 ADB&a…...
Git 常用命令完全指南:从入门到高效协作
文章需要结构清晰,涵盖从入门到进阶的常用命令,结合实例和注意事项,帮助用户快速掌握Git的核心功能,并应用到实际项目中 一、仓库初始化与基础操作 1. 创建与克隆仓库 # 初始化本地仓库 git init# 克隆远程仓库(SSH方…...
学习单片机需要多长时间才能进行简单的项目开发?
之前有老铁问我,学单片机到底要多久,才能进行简单的项目开发?是三个月速成,还是三年磨一剑? 今天咱们就来聊聊这个话题,我不是什么高高在上的专家,就是个踩过无数坑、烧过几块板子的“技术老友”…...
面试系列|蚂蚁金服技术面【3】
今天继续分享一下蚂蚁金服的 Java 后端开发岗位真实社招面经,复盘面试过程中踩过的坑,整理面试过程中提到的知识点,希望能给正在准备面试的你一些参考和启发,希望对你有帮助,愿你能够获得心仪的 offer ! 第二轮面试之…...
Spring Boot项目中成功集成了JWT
JWT 原理解释 什么是 JWT? JSON Web Token(JWT)是一种开放标准(RFC 7519),用于在网络应用环境间安全地将信息作为JSON对象传输。JWT通常用于身份验证和信息交换。 JWT 的结构 JWT由三部分组成ÿ…...
《Java SQL 操作指南:深入理解 Statement 用法与优化》
在 Java 数据库编程中,Statement 是用于执行 SQL 语句的接口,允许程序与数据库进行交互。本文将详细介绍 Statement 的基本概念、常见用法以及 PreparedStatement 和 CallableStatement 等相关接口。 1. Statement 基本介绍 Statement 接口继承了 AutoC…...
element ui设置结束时间为23:59:59
开始时间为00:00:00结束时间为23:59:59 在请求接口前,用substring取结束时间的年月日,并替换时间值即可 <el-formref"searchForm":model"searchForm":inline"true"size"mini"keyup.enter.native"getDa…...
Matlab 舰载机自动着舰控制系统研究
1、内容简介 Matlab 188-舰载机自动着舰控制系统研究 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略...
数据集格式转换——json2txt、xml2txt、txt2json【复制就能用】
秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏地址:YOLO11入门 + 改进涨点——点击即可跳转 欢迎订阅 目录 json2txt脚本 xml2txt txt2json...
MySQL 横向衍生表(Lateral Derived Tables)
前面我们介绍过MySQL中的衍生表(From子句中的子查询)和它的局限性,MySQL8.0.14引入了横向衍生表,可以在子查询中引用前面出现的表,即根据外部查询的每一行动态生成数据,这个特性在衍生表非常大而最终结果集…...
基于llama.cpp的QwQ32B模型推理
基于llama.cpp的QwQ32B模型推理 llama.cpp项目主页: https://github.com/ggml-org/llama.cpp# llama.cpp源码下载 cd /root/lanyun-tmpgit clone https://github.com/ggml-org/llama.cpp#llama.cpp编译 llama.cpp是个C语言项目,实际调用过程需要先构建项…...
【Jmeter】使用教程
下载及安装 参考链接: JMeter下载及安装(附插件及中文包超详细) 参考链接: 【Jmeter】win 10 / win 11:Jmeter 下载、安装、汉化、新机迁移、版本更新(Jmeter 4 以上版本均适用) 分辨率的调整 参考链接: Jmeter5.3字…...
黑马商城完成随笔
完结撒花 🎉 🎉 🎉 差不多用了两三个星期?终于是完成了。 黑马商城体量应该是全部黑马项目中体量最多,技术栈最复杂的了。 可是仍然存在之前黑马项目的问题:不细致,不完整 很多技术栈的使用仅…...
【Python 算法零基础 1.线性枚举】
我装作漠视一切,以为这样就可以不在乎 —— 25.3.17 一、线性枚举的基本概念 1.时间复杂度 线性枚举的时间复杂度为 O(nm),其中 n是线性表的长度。m 是每次操作的量级,对于求最大值和求和来说,因为操作比较简单,所以 …...
涨薪技术|Kubernetes(k8s)之Pod端口设置及资源配额
01端口设置 使用以下命令可以可以查看到到ports的子选项 [rootk8s-master01 ~]# kubectl explain pod.spec.containers.portsKIND: PodVERSION: v1RESOURCE: ports <[]Object>FIELDS:name <string> # 端口名称,如果指定,必须保证name在pod…...
七大常用智能家居协议对比
如果您不知道在项目中使用哪种智能家居通信协议,那么进入智能家居行业可能会很困难。如果没有合适的协议将其集成到智能家居生态系统中,智能家居设备将无法正常工作。否则,您将面临硬件和软件无法满足最终用户期望的风险。协议选择不当可能会…...
K8S快速部署
前置虚拟机环境正式部署BUG解决 前置虚拟机环境 每个虚拟机配置一次就好 #关闭防火墙 systemctl stop firewalld systemctl disable firewalld #关闭 selinux sed -i s/enforcing/disabled/ /etc/selinux/config # 永久 setenforce 0 # 临时 #关闭 swap swapoff -a # 临时 vi…...
TCP 三次握手四次挥手过程详解
注:本文为 “TCP 的三次握手与四次挥手” 相关文章合辑。 英文引文,机翻未校。 中文引文,未整理去重。 英文引文第二篇,实为国内《稀土掘金技术社区》文章,没检索到原文,此处 “出口转内销” 。 如有内…...
如何利用 Zeabur 实现 OceanBase 的一键部署
引言 Zeabur 是一个功能强大且即开即用的自动化部署平台,它不仅能迅速部署多种应用,还支持一键安装 MySQL、PostgreSQL 等数据库服务。 Zeabur 拥有众多国内外用户,如 AFFiNE、Bytebase 等企业客户,以及大量全栈和独立开发者。将…...
基于Springboot+服务器磁盘的本地文件存储方案
[local-file-system]基于服务器磁盘的本地文件存储方案 仅提供后端方案 github 环境 JDK11linux/windows/mac 应用场景 适用于ToB业务,中小企业的单体服务,仅使用磁盘存储文件的解决方案 仅使用服务器磁盘存储 与业务实体相结合的文件存储方案&…...
基于FPGA的3U机箱模拟量高速采样板ADI板卡,应用于轨道交通/电力储能等
板卡简介: 本板为模拟量高速采样板(ADI),主要用于电机转速和相电流检测,以实现电机闭环控制。 性能规格: 电源:DC5V,DC3.3V,DC15V,DC24V FPGA:…...
泰勒·斯威夫特(Taylor Swift)的音乐影响力与商业版图深度研究
泰勒斯威夫特的音乐影响力与商业版图深度研究 简介 泰勒斯威夫特(Taylor Swift)是当今流行音乐领域最具影响力的全球巨星之一。自少年时期出道以来,她在音乐风格、形象和商业战略上不断演变,从乡村音乐新人成长为引领流行文化的…...
神经网络微调技术解析
神经网络微调技术 微调(Fine-tuning)是迁移学习的核心技术,通过在预训练模型基础上调整参数,使其适应特定任务或领域。以下从传统方法、参数高效微调(PEFT)、新兴技术三个维度展开,覆盖主流技术…...
鸿蒙路由 HMRouter 配置及使用 三 全局拦截器使用
1、前期准备 简单封装一个用户首选项的工具类 import { preferences } from "kit.ArkData";// 用户首选项方法封装 export class Preferences {private myPreferences: preferences.Preferences | null null;// 初始化init(context: Context, options: preference…...
国科大——计网(0812)——考试真题
前沿: 此篇文章记录了国科大秋季学期计网(0812)课程的一些考试真题,某些题目的答案仅供参考,还请自行辨别。 备注: 计网的考试题一般都会多一道,每道题的分值相同,例如:…...
Feedback-Guided Autonomous Driving
Feedback-Guided Autonomous Driving idea 问题设定:基于 CARLA 的目标驱动导航任务,通过知识蒸馏,利用特权智能体的丰富监督信息训练学生传感器运动策略函数 基于 LLM 的端到端驱动模型:采用 LLaVA 架构并添加航点预测头&#…...
超参数优化算法:scikit-opt库、Scikit-Optimize库
1 scikit-opt库:https://www.cnblogs.com/luohenyueji/p/18333387 https://blog.csdn.net/weixin_45750972/article/details/124683402 a 差分进化算法 (Differential Evolution):一种基于群体搜索的优化算法,通过模拟生物进化的过程来寻找最…...
我与DeepSeek读《大型网站技术架构》- 大型网站架构技术一览与Web开发技术发展历程
文章目录 大型网站架构技术一览1. 前端架构2. 应用层架构3. 服务层架构4. 存储层架构5. 后台架构6. 数据采集与监控7. 安全架构8. 数据中心机房架构 Web开发技术发展历程一、静态HTML阶段二、CGI脚本模式阶段三、服务器页面模式阶段 大型网站架构技术一览 1. 前端架构 浏览器…...
解决QT_Debug 调试信息不输出问题
方式1 :手动通过添加环境变量解决 ->使用命令: QT_LOGGING_TO_CONSOLE1 qtcreator启动 ->如若还未输出qDebug调试信息 则在程序中引<QLoggingCategory>包 #include <QLoggingCategory> ->在程序入口添加 QLoggingCategory::defa…...
NebulaGraph3.3.0部署与配置
系统参数 8g 2核参考文档: https://docs.nebula-graph.com.cn/3.8.0/4.deployment-and-installation/2.compile-and-install-nebula-graph/2.install-nebula-graph-by-rpm-or-deb/静态IP配置 # 修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33# 修改文件内容…...
oracle 基础知识之 多表查询
多表查询定义:当查询的数据并不是来源一个表时,需要使用多表连接操作完成查询。多表连接查询通过表之间的关联字段,一次查询出多个表的数据。多表查询包括了等值连接、左连接、右连接、完全连接。 1.等值连接 等值连接也称为简单连接…...
《论分布式系统架构设计及其应用》架构师论文
【摘要】 2022年3月,我参与了某金融科技公司“智能风控云平台”项目的研发工作,担任系统架构师职务,负责分布式系统架构设计与核心技术选型。该平台旨在为银行、保险等金融机构提供实时风险评估、反欺诈及数据服务,需支撑每秒十万…...