Element Plus table formatter函数返回html内容

查看 Element Plus table formatter 支持返回 类型为string 和 VNode对象;

若依全局直接用h函数,无需引用

下面普通基本用法:在Element Plus中,你可以使用自定义的formatter函数来返回VNode对象,从而实现更灵活的自定义渲染。

首先,在Table组件中定义一个自定义的formatter函数,并返回一个VNode对象。

<template><el-table :data="tableData"><el-table-column prop="value" label="Value" :formatter="formatValue"></el-table-column></el-table>
</template><script>
import { h } from 'vue';export default {data() {return {tableData: [{ value: 10 },{ value: 20 },{ value: 15 },// 其他数据],};},methods: {formatValue(row, column, cellValue) {if (cellValue > 15) {return h('span', { style: 'color: red;' }, cellValue);} else {return h('span', { style: 'color: green;' }, cellValue);}},},
};
</script>

在上述代码中,我们使用h函数(来自Vue 3的@vue/runtime-core模块)创建了一个span元素的VNode对象。根据单元格的值,我们动态设置了不同的样式。

这样,Table组件将会渲染出根据单元格值动态设置样式的单元格。

请注意,h函数用于创建VNode对象,它接受三个参数:标签名、属性对象和子节点。你可以根据需要创建不同的VNode对象来实现自定义渲染。

我这边效果:

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

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

相关文章

nvm管理(切换)node版本,方便vue2,vue3+ts开发

使用nvm切换node版本 1. 完全删除之前的node及npm&#xff08;清理干净Node: 应用程序&#xff0c;缓存的文件&#xff0c;环境变量 &#xff09; 2. 使用管理员身份安装nvm&#xff0c;下载如下 3. 安装完nvm之后找到nvm下载路径对应的文件 4. 使用管理员身份打开cmd&#xff…

人工智能和大数据:跨境电商如何实现定制化营销?

在跨境电商竞争激烈的市场中&#xff0c;如何精准地满足消费者的需求并提供个性化的购物体验成为了商家们面临的重要挑战。幸运的是&#xff0c;人工智能和大数据技术的崛起为跨境电商带来了新的机遇&#xff0c;使得定制化营销成为可能。本文将探讨人工智能和大数据在跨境电商…

C# OpenVino Yolov8 Detect 目标检测

效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using static System.Net.Mime.MediaT…

Mybatis 插入、修改、删除

前面几篇我们介绍了使用Mybatis查询数据&#xff0c;并且也了解了如何在Mybatis中使用JDK的日志系统打印日志&#xff1b;本篇我们继续介绍如何使用Mybatis完成数据的插入、修改和删除。 如果您对查询数据和Mybatis集成JDK日志系统不太了解&#xff0c;建议您先进行了解后再阅…

《Web安全基础》04. 文件操作安全

web 1&#xff1a;文件操作安全2&#xff1a;文件上传漏洞2.1&#xff1a;简介2.2&#xff1a;防护与绕过2.3&#xff1a;WAF 绕过2.3.1&#xff1a;数据溢出2.3.2&#xff1a;符号变异2.3.3&#xff1a;数据截断2.3.4&#xff1a;重复数据 3&#xff1a;文件包含漏洞4&#xf…

Pyecharts数据可视化(一)

目录 1.Pyecharts简介 2.Pyecharts的常用方法 3.Pyecharts绘制柱状图 3.1 绘制并列柱状图 3.2 绘制水平直方图 1.Pyecharts简介 Pyecharts是一个用于创建交互式图表的Python库。它基于Echarts&#xff0c;一个强大的JavaScript图表库&#xff0c;Pyecharts允许Python开发者…

二、模型驱动测试设计

如果能够提升抽象层级&#xff0c;测试设计师会更加有效和有效率。 完全改正软件是不可能到达的&#xff0c;其原因是可以以形式化的方式来表述的而且是富有哲理的。聪明的软件工程师不再追求软件的完全正确&#xff0c;而是试着评判软件的行为来决定其是否为可接受的。**包括可…

人工智能的优势:使用 GPT 和扩散模型生成图像

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 世界被人工智能 &#xff08;AI&#xff09; 所吸引&#xff0c;尤其是自然语言处理 &#xff08;NLP&#xff09; 和生成 AI 的最新进展&#xff0c;这是有充分理由的。这些突破性技术有可能提高各种任务的日常生产力。…

C++之生成key-value键值三种方式(一百九十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

将目标检测项目移植到linux上出现OSERROR

在windows上运行项目正常&#xff0c;但是在centos9上运行出现找到资源&#xff0c;第一次遇到这个问题&#xff0c;通过代码回找&#xff0c;一步一步发现&#xff0c;读取数据没问题&#xff0c;但是在预测的时候无法读取&#xff0c;查到的资料 说明显示字体问题&#xff0c…

IIR滤波器

IIR滤波器原理 IIR的特点是&#xff1a;非线性相位、消耗资源少。 IIR滤波器的系统函数与差分方程如下所示&#xff1a; 由差分方程可知IIR滤波器存在反馈&#xff0c;因此在FPGA设计时要考虑到有限字长效应带来的影响。差分方程中包括两个部分&#xff1a;输入信号x(n)的M节…

uniapp对接支付宝出现的问题

支付逻辑没问题却出现商家订单参数异常&#xff0c;请重新发起付款 检查发现后端传回来根本没什么问题&#xff0c;检查很久发现需要下载证书放在服务器上 小程序文档 - 支付宝文档中心

谷歌收录网页最快需要多久?

答案是&#xff1a;谷歌收录网页最快是24小时内。 当我们建立新的网站或者为现有网站添加新内容时&#xff0c;都希望这些内容能够尽快被谷歌收录。 但实际上&#xff0c;谷歌的收录时间可能会因各种因素而异。 这篇文章将为您详解相关的知识点。 网站收录的基本过程 如何…

Centos7离线安装ALISQL5.6.32-8

由于公司设备对数据需要大量的读取和查询&#xff0c;开始使用的mysql8&#xff0c;但是未优化的mysql插入和查询及其缓慢&#xff0c;因此我与同事分开研究&#xff0c;优化方案。我负责寻找可替代高效的数据库&#xff0c;然后问同学&#xff0c;发现alisql性能不错&#xff…

软件工程概述

软件工程概述 软件工程指的是应用计算机科学、数学及管理科学等原理&#xff0c;以工程化的原则和方法来解决软件问题的工程&#xff0c;目的是提高软件生产效率、提高软件质量、降低软件成本。 1. 计算机软件 计算机软件指的是计算机系统中的程序及其文档。程序是计算任务的…

测试阶段之冒烟测试

冒烟测试 一般建议1-2个小时完成冒烟测试。 注意冒烟用例不是P1P2&#xff0c;而是其中的部分用例

redis集群架构详解

一、集群架构搭建 1、配置 在一台机器上模拟多台机器搭建redis集群&#xff0c;一个集群代表一台物理机 集群1路径&#xff1a; /usr/local/redis/redis-cluster/cluster1/9001/redis.conf/usr/local/redis/redis-cluster/cluster1/9004/redis.conf/usr/local/redis/redis-…

qt使用QCustomplot绘制cpu和内存使用率图

一、QCustomPlot介绍 QCustomPlot是一个开源的Qt C图表库&#xff0c;用于可视化数据。该库提供了多种类型的可定制的图表&#xff0c;包括散点图、线图、柱状图和等高线图等。它还支持自定义绘制&#xff0c;可以创建任意形状和大小的元素&#xff0c;并使其与其他元素交互。Q…

2023年高教社杯数学建模国赛 赛题浅析

2023年国赛如期而至&#xff0c;为了方便大家尽快确定选题&#xff0c;这里将对赛题进行浅析&#xff0c;以分析赛题的主要难点、出题思路以及选择之后可能遇到的难点进行说明&#xff0c;方便大家尽快确定选题。 难度排序 B>A>C 选题人数 C>A>B (预估结果&…

matlab 计算点云中值

目录 一、概述1、算法概述2、主要函数二、代码示例三、结果展示四、参数解析输入参数输出参数五、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述