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 属性

属性名类型解释
stylestring能够单独配置某一列的样式
classstring能够单独配置某一列的class名称
renderfunction接受两个参数 (value, row) value是当前行当前列的数据,row是当前行的数据 返回的值会渲染在table对应的列中
componentfunction接受两个参数 (value, row) value是当前行当前列的数据,row是当前行的数据,返回一个vnode,通过vue3自带的h函数实现
fixedboolean是否让当且列固定
剩下的属性查看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))
)

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

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

相关文章

Mermaid 子图 + 拖拽缩放:让流程图支持无限细节展示

在技术文档、项目管理和可视化分析中&#xff0c;流程图是传递复杂逻辑的核心工具。传统流程图往往静态且难以适应细节展示&#xff0c;而 Mermaid 与 svg-pan-zoom 的结合&#xff0c;则为这一痛点提供了完美解决方案。本文将深入解析如何通过 Mermaid 的子图&#xff08;subg…

前端权限系统

前端权限系统是为了确保用户只能访问他们有权限查看的资源而设计的。在现代前端开发中&#xff0c;权限控制不仅仅是简单的显示或隐藏元素&#xff0c;还涉及到对路由、组件、数据和操作权限的细致控制。下面是前端权限系统的常见设计方案和实现步骤。 前端权限系统的组成部分 …

Nature | TabPFN:表格基础模型用于小规模数据分析

表格数据是按行和列组织的电子表格形式&#xff0c;在从生物医学、粒子物理到经济学和气候科学等各个科学领域中无处不在 。基于表格其余列来填充标签列缺失值的基本预测任务&#xff0c;对于生物医学风险模型、药物研发和材料科学等各种应用至关重要。尽管深度学习彻底改变了从…

c++学习系列----003.写文件

c 写文件 文章目录 c 写文件1️⃣ 使用 ofstream 写入文本文件2️⃣ 追加模式写入3️⃣ 写入二进制文件4️⃣ 使用 fstream 进行读写5️⃣ 使用 fprintf()&#xff08;C 方式&#xff09;6️⃣ 使用 write() 低级 I/O 方式推荐方式 C 写文件的几种方式主要有以下几种&#xff1…

C语言及内核开发中的回调机制与设计模式分析

在C语言以及操作系统内核开发中,回调机制是一种至关重要的编程模式。它通过注册框架和定义回调函数,实现了模块间的解耦和灵活交互,为系统的扩展性和可维护性提供了有力支持。本文将深入探讨这种机制的工作原理、应用场景以及与设计模式的关联。 一、回调机制的核心概念 (…

浅谈StarRocks SQL性能检查与调优

StarRocks性能受数据建模、查询设计及资源配置核心影响。分桶键选择直接决定数据分布与Shuffle效率&#xff0c;物化视图可预计算复杂逻辑。执行计划需关注分区裁剪、谓词下推及Join策略&#xff0c;避免全表扫描或数据倾斜。资源层面&#xff0c;需平衡并行度、内存限制与网络…

stable Diffusion 中的 VAE是什么

在Stable Diffusion中&#xff0c;VAE&#xff08;Variational Autoencoder&#xff0c;变分自编码器&#xff09;是一个关键组件&#xff0c;用于生成高质量的图像。它通过将输入图像编码到潜在空间&#xff08;latent space&#xff09;&#xff0c;并在该空间中进行操作&…

从零开始 | C语言基础刷题DAY3

❤个人主页&#xff1a;折枝寄北的博客 目录 1.打印3的倍数的数2.从大到小输出3. 打印素数4.打印闰年5.最大公约数 1.打印3的倍数的数 题目&#xff1a; 写一个代码打印1-100之间所有3的倍数的数字 代码&#xff1a; int main(){int i 0;for (i 1; i < 100; i){if (i % …

告别死锁!Hyperlane:Rust 异步 Web 框架的终极解决方案

告别死锁&#xff01;Hyperlane&#xff1a;Rust异步Web框架的终极解决方案 &#x1f525; 为什么选择Hyperlane&#xff1f; Hyperlane是专为Rust开发者打造的高性能异步Web框架&#xff0c;通过革命性的并发控制设计&#xff0c;让您彻底摆脱多线程编程中的死锁噩梦。框架内…

CLR中的类型转换

CLR中的类型转换 字符串类型转换容器类型转换自定义类型相互转换项目设置CLR(Common Language Runtime,公共语言运行时)是微软.NET框架的核心组件,是微软对 CLI 标准的具体实现,负责管理和执行托管代码,提供跨语言互操作性、内存管理、安全性等关键服务CLR的类型转换机制…

QT5.15.2加载pdf为QGraphicsScene的背景

5.15.2使用pdf 必须要安装QT源码&#xff0c;可以看到编译器lib目录已经有pdf相关的lib文件&#xff0c;d是debug 1.找到源码目录&#xff1a;D:\soft\QT\5.15.2\Src\qtwebengine\include 复制这两个文件夹到编译器的包含目录中:D:\soft\QT\5.15.2\msvc2019_64\include 2.找…

MCP 开放协议

本文翻译整理自&#xff1a; https://modelcontextprotocol.io/introduction 文章目录 简介一、关于 MCP二、为什么选择MCP&#xff1f;通用架构 三、开始使用1、快速入门2、示例 四、教程五、探索 MCP六、贡献和支持反馈贡献支持和反馈 服务器开发者一、构建服务器1、我们将要…

主流区块链

文章目录 主流链1. Solana特点&#xff1a;适用场景&#xff1a;工具链&#xff1a; 2. Binance Smart Chain (BSC)特点&#xff1a;适用场景&#xff1a;工具链&#xff1a; 3. Avalanche特点&#xff1a;适用场景&#xff1a;工具链&#xff1a; 4. Polkadot特点&#xff1a;…

GaussDB备份数据常用命令

1、常用备份命令gs_dump 说明&#xff1a;是一个服务器端工具&#xff0c;可以在线导出数据库的数据&#xff0c;这些数据包含整个数据库或数据库中指定的对象&#xff08;如&#xff1a;模式&#xff0c;表&#xff0c;视图等&#xff09;&#xff0c;并且支持导出完整一致的数…

ctfshow-萌新赛刷题笔记

1. 给她 启动靶机&#xff0c;发现是sql注入&#xff0c;尝试后发现被转义\&#xff0c;思路到这里就断了&#xff0c;再看题目给她&#xff0c;想到git.有可能是.git文件泄露&#xff0c;dirsearch扫描一下果然是&#xff0c;用GitHack看一下git备份文件&#xff0c;得到hint…

Transformer:GPT背后的造脑工程全解析(含手搓过程)

Transformer&#xff1a;GPT背后的"造脑工程"全解析&#xff08;含手搓过程&#xff09; Transformer 是人工智能领域的革命性架构&#xff0c;通过自注意力机制让模型像人类一样"全局理解"上下文关系。它摒弃传统循环结构&#xff0c;采用并行计算实现高…

算法备案全景洞察趋势解码:技术迭代、行业裂变与生态重构

自 2023 年《互联网信息服务深度合成管理规定》实施以来&#xff0c;算法备案已成为中国 AI 产业发展的晴雨表。截至 2025 年第十批备案公布&#xff0c;累计通过审核的深度合成算法已突破 5000 项&#xff0c;勾勒出一条 “技术攻坚 - 场景落地 - 生态构建” 的清晰轨迹。本文…

Java vs Go:SaaS 系统架构选型解析与最佳实践

在构建 SaaS&#xff08;Software as a Service&#xff09;系统时&#xff0c;选用合适的技术栈至关重要。Java 和 Go 是当今最受欢迎的后端开发语言之一&#xff0c;各自有其优势和适用场景。那么&#xff0c;SaaS 系统开发应该选择 Java 还是 Go&#xff1f;本文将从多个维度…

MySQL高频八股——事务过程中Undo log、Redo log、Binlog的写入顺序(涉及两阶段提交)

大家好&#xff0c;我是钢板兽&#xff01; 在上一篇文章中&#xff0c;我分别介绍了 Undo Log、Redo Log 和 Binlog 在事务执行过程中的作用与写入机制。然而&#xff0c;实际应用中&#xff0c;这三种日志的写入是有先后顺序的。因此&#xff0c;本篇文章将深入探讨它们的写…

AI自动文献综述——python先把知网的文献转excel

第一步 Refworks转excel 下载以后是个txt文件, 帮我把这个txt文件转excel,用函数形式来写便于我后期整理成软件 提取 其中的 标题,作者,单位,关键词,摘要。 分别存入excel列。 import re import pandas as pddef extract_and_convert(txt_file_path, output_excel_path…