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.hqwc.cn/news/108557.html

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

相关文章

Unity 课时 4 : No.4 模拟面试题

课时 4 : No.4 模拟面试题 C# 1. 请说明字符串中 string str null string str “” string str string.Empty 三者的区别 第一个未作初始化没有值, 第二个为空字符串, 答案&#xff1a; str null 在堆中没有分配内存地址 str "" 和 string.Empty 一样都是…

FPGA计数器边界问题解析

FPGA计数器边界问题解析 一次作者在处理AMBE2000数据接收过程中&#xff0c;遇到一个问题&#xff0c;对该计数器边界总是模糊不清。现在予以说明&#xff0c;以警示以后工作时书写错误代码。 AMBE2000数据一旦准备好后&#xff0c;一次会输出24个字&#xff0c;其中第1个字0x…

怎样做一个简易而温馨的原木风居室空间

由 balbek bureau 设计的 Relogged 是一座重新设计的私人住宅&#xff0c;位于乌克兰河岸的绿化区。顾名思义&#xff0c;该项目重新诠释了木屋的概念&#xff0c;并与充满自然气息的环境相呼应&#xff0c;营造出宁静舒适的生活氛围。在探索重新设计的木屋实例时&#xff0c;建…

TypeScript——泛型理论与实践

1. 简介 软件工程的一个重要部分就是构建组件&#xff0c;组件不仅需要有定义良好和一致的 API&#xff0c;还需要是可复用的。好的组件不仅能够兼容现有的数据类型&#xff0c;也能适用于未来可能出现的数据类型&#xff0c;这在构建大型软件系统时会有很大的灵活度以及很高的…

Appium混合页面点击方法tap的使用

原生应用开发&#xff0c;是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发&#xff1b;HTML5&#xff08;h5&#xff09;应用开发&#xff0c;是利用Web技术进行的App开发。目前&#xff0c;市面上很多app都是原生和h5混合开发&#xff0c…

ChatGPT帮助一名儿童确诊病因,之前17位医生无法确诊

9月13日&#xff0c;Today消息&#xff0c;一位名叫Alex的4岁儿童得了一种浑身疼痛的怪病&#xff0c;每天需要服用Motrin&#xff08;美林&#xff09;才能止痛。3年的时间&#xff0c;看了17名医生无法确诊病因。&#xff08;新闻地址&#xff1a;https://www.today.com/heal…

拼多多面试题解析:Java实现继承的七种方式!

大家好&#xff0c;我是小米&#xff01;今天&#xff0c;我要和大家一起来深入探讨一下拼多多的面试题&#xff1a;Java 实现继承有哪 7 种方式&#xff1f;这是一个相当有深度的问题&#xff0c;不过别担心&#xff0c;我会尽力以通俗易懂的方式给大家讲解清楚&#xff0c;让…

c语言练习57:浮点数在内存中的存储

浮点数在内存中的存储 上⾯的代码中&#xff0c; num 和 *pFloat 在内存中明明是同⼀个数&#xff0c;为什么浮点数和整数的解读结果会差别 这么⼤&#xff1f; 要理解这个结果&#xff0c;⼀定要搞懂浮点数在计算机内部的表⽰⽅法。 根据国际标准IEEE&#xff08;电⽓和电⼦⼯…

《算法竞赛·快冲300题》每日一题:“点灯游戏”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 点…

OpenCV Series : Target Box Outline Border

角点 P1 [0] (255, 000, 000) P2 [1] (000, 255, 000) P3 [2] (000, 000, 255) P4 [3] (000, 000, 000)垂直矩形框 rect cv2.minAreaRect(cnt)targetColor roi_colortargetThickness 1targetColor (255, 255, 255)if lineVerbose:if …

Docker基础学习

Docker 学习目标&#xff1a; 掌握Docker基础知识&#xff0c;能够理解Docker镜像与容器的概念 完成Docker安装与启动 掌握Docker镜像与容器相关命令 掌握Tomcat Nginx 等软件的常用应用的安装 掌握docker迁移与备份相关命令 能够运用Dockerfile编写创建容器的脚本 能够…

【漏洞复现】AspCMS commentList.asp SQL注入

漏洞描述 AspCMS commentList.asp 存在SQL注入漏洞&#xff0c;攻击者通过漏洞可以获取管理员md5的密码&#xff0c;进行解密后登录获取敏感数据。 免责声明 技术文章仅供参考&#xff0c;任何个人和组织使用网络应当遵守宪法法律&#xff0c;遵守公共秩序&#xff0c;尊重…