Element Plus table formatter函数返回html内容

news2024/9/25 13:16:52

查看 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.coloradmin.cn/o/985581.html

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

相关文章

FasterNet(PConv)paper笔记(CVPR2023)

论文&#xff1a;Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks 先熟悉两个概念&#xff1a;FLOPS和FLOPs&#xff08;s一个大写一个小写&#xff09; FLOPS: FLoating point Operations Per Second的缩写&#xff0c;即每秒浮点运算次数&#xff0c;或…

Pytorch实现鸟类品种分类识别(含训练代码和鸟类数据集)

Pytorch实现鸟类品种分类识别(含训练代码和鸟类数据集) 目录 Pytorch实现鸟类品种分类识别(含训练代码和鸟类数据集) 1. 前言 2. 鸟类数据集 &#xff08;1&#xff09;Bird-Dataset26 &#xff08;2&#xff09;自定义数据集 3. 鸟类分类识别模型训练 &#xff08;1&a…

核心实验13合集_vlan mapping 和QinQ_ENSP

项目场景一&#xff1a; 核心实验13合集-1_vlan高级配置_ENSP vlan mapping vlan转换 将用户端发来的vlan30-31的标签全部转换成vlan100向上发送 相关知识点&#xff1a; 定义: VLAN Mapping通过修改报文携带的VLAN Tag来实现不同VLAN的相互映 射。 目的: 在某些场景中&#xf…

c语言数组的用法

c语言数组的用法如下&#xff1a; 一维数组的定义方式 在C语言中使用数组必须先进行定义。一维数组的定义方式为&#xff1a; 类型说明符 数组名 [常量表达式]; 其中&#xff0c;类型说明符是任一种基本数据类型或构造数据类型。数组名是用户定义的数组标识符。方括号中的常量表…

原生js之dom表单改变和鼠标常用事件

那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件. 关于onchange方法 onchange方法在鼠标输入完后点击任何非输入框位置时触发.触发时即可改变原有输入框的值. out 、leave、over、down、up鼠标方法 当用…

YOLOV7改进-空洞卷积+共享权重的Scale-Aware RFE

代码 1、先把文件复制到common.py中 2、yolo.py添加类名 3、下半部分进行添加修改 4、cfg-training&#xff1a;新建配置文件 加了一行&#xff0c;后面对于序号1 5、这里选择12层替代

软件第三方测评机构简析:良好的测试环境对软件产品起到的作用

近年来&#xff0c;软件行业发展迅速&#xff0c;软件产品的质量成为用户关注的焦点。而软件的质量评估往往需要依赖专业的第三方测评机构&#xff0c;为了更好地了解软件测试环境对产品质量的重要性&#xff0c;小编整理了以下简析&#xff1a; 一、良好的测试环境对软件产品…

Redis是单线程Or多线程?单线程为什么反而快?

0. 从什么角度看是单线程or多线程 从总体角度来&#xff0c;redis是单线程的&#xff1a; Redis 单线程指的是&#xff1a; 「接收客户端请求->解析请求 ->进行数据读写等操作->发送数据给客户端」 这个过程是由一个线程&#xff08;主线程&#xff09;来完成的…

【Leetcode刷题】哈希

本篇文章为 LeetCode 哈希模块的刷题笔记&#xff0c;仅供参考。 哈希表是一种使用哈希函数组织数据&#xff0c;以支持快速插入和搜索的数据结构。哈希表通过哈希函数通过将任意类型的数据映射到固定大小的数据&#xff0c;以实现快速查找和存储数据。C 中的无序容器 unorder…

音视频编码格式-AAC ADT

1408(16进制) : 0001 0100 0000 1000 audioObjectType为 00010 , 即 2&#xff0c; profie (audioObjectType -1 ) AAC LC samplingFrequencyIndex为 1000 , 即 8 , 对应的采样频率为 16000 channelConfiguration为 0001 , 表示channel数量为1

10、哈希函数与哈希表

哈希函数 出现次数最多的 32G 小文件方法&#xff1a;利用哈希函数在种类上均分 设计RandomPool结构 设计一种结构&#xff0c;在该结构中有如下三个功能: insert(key):将某个key加入到该结构&#xff0c;做到不重复加入 delete(key):将原本在结构中的某个key移除 getRando…

电商3D资产优化管线的自动化

如果你曾经尝试将从 CAD 程序导出的 3D 模型上传到 WebGL 或 AR 服务&#xff0c;那么可能会遇到最大文件大小、永无休止的进度条和糟糕的帧速率等问题。 为了创作良好的在线交互体验&#xff0c;优化 3D 数据的大小和性能至关重要。 这也有利于你的盈利&#xff0c;因为较小的…

识别评估项目风险常用6大方法

提前识别和评估项目风险&#xff0c;有助于风险预防和规避&#xff0c;从而提前采取预防措施&#xff0c;有效避免和减少风险的发生&#xff0c;防止风险进一步扩大和恶化。如果没有提前识别风险&#xff0c;没有及时处理风险问题&#xff0c;往往造成项目交付延迟、成本超支等…

实时监测与优化:3D车辆状态可视化的崭新前景

当谈到车辆状态可视化时&#xff0c;我们进入了数字化时代的新境界。这不仅是一种技术革命&#xff0c;更是一种全新的智能化管理方式&#xff0c;为车辆运营提供了前所未有的便利和效率。以下是3D车辆状态可视化的一些关键方面&#xff0c;以及它如何改变了我们的交通和物流管…

RT-DETR个人整理向理解

一、前言 在开始介绍RT-DETR这个网络之前&#xff0c;我们首先需要先了解DETR这个系列的网络与我们常提及的anchor-base以及anchor-free存在着何种差异。 首先我们先简单讨论一下anchor-base以及anchor-free两者的差异与共性&#xff1a; 1、两者差异&#xff1a;顾名思义&…

《TCP/IP网络编程》阅读笔记--域名及网络地址

目录 1--域名系统 2--域名与 IP 地址的转换 2-1--利用域名来获取 IP 地址 2-2--利用 IP 地址获取域名 3--代码实例 3-1--gethostbyname() 3-2--gethostbyaddr() 1--域名系统 域名系统&#xff08;Domain Name System&#xff0c;DNS&#xff09;是对 IP 地址和域名进行相…

三分钟,教你做出领导满意的可视化报表

数字化已然成为社会发展的共识&#xff0c;企业想要在未来的竞争中占据优势&#xff0c;获取不断发展的数字经济&#xff0c;就必须将数据看作企业的战略资源&#xff0c;利用数据可视化将数据转化为信息&#xff0c;促进企业发展。 数据可视化是什么 在早期数据分析领域&…

业务安全情报第22期 | 不法分子为何盗刷企业短信?

目录 手机短信的重要性 手机短信接口被攻击的危害 社交App短信遭遇疯狂盗刷 社交App该如何防控威胁 规则上的防护措施 技术上的防护措施 近期监测发现&#xff0c;某知名社交平台遭遇黑灰产大规模注册账号&#xff0c;账号短信接口被疯狂盗用。不仅影响正常用户操作&…

TSINGSEE青犀AI视频分析/边缘计算/AI算法·人脸识别功能——多场景高效运用

旭帆科技AI智能分析网关可提供海量算法供应&#xff0c;涵盖目标监测、分析、抓拍、动作分析、AI识别等&#xff0c;可应用于各行各业的视觉场景中。同时针对小众化场景可快速定制AI算法&#xff0c;主动适配大厂近百款芯片&#xff0c;打通云/边/端灵活部署&#xff0c;算法一…

Stable Diffusion — ControlNet 超详细讲解

Stable Diffusion — ControlNet 超详细讲解 ControlNet 最近非常火&#x1f525;&#xff01;ControlNet 和 Stable Diffusion 的结合使 Stable Diffusion 能够接受指导图像生成过程的条件输入&#xff0c;从而增强了 Stable Diffusion 的性能。今天为大家深入剖析 ControlNe…