vue3 vxe-grid 通过数据库返回的列信息,生成columns,并且其中有一列是img类型,进行slots的格式化处理。

news2024/9/24 7:22:42

1、一般我们写死的列信息的时候,会这样定义:

2、然后我们在template里面,这样这样写slots格式化部分:

这样表格中就会展示出一张图片,并且,我们点击了可以查看大图。

3、那么我们从数据库中返回的列,应该如何去写:

let fields = {
              field: item.fieldname,
              title: item.fielddesc,
              width: item.fieldwidth,
              showOverflow: 'tooltip',
              align: item.fieldalign,
              sortable: Boolean(item.columnsorted),
            };

fields.slots = {
                default: 'picdisabledSlot',
}

4、对于格式化日期的部分:

fields.slots = {
                default: ({ row }) => {
                  let fieldvalue = row[item.fieldname];

                    return dayjs(fieldvalue).format('YYYY-MM-DD');
               }
     }

这样就可以了,之前测试过,通过jsx来编写,发现不行,返回一个string是可以的。

// default: ({ row }) => {
                //   return [
                //     h('Image', {
                //     attrs: {
                //     src: row.bg, // 替换为你的图片路径
                //     width: '50', // 图片宽度
                //     height: '50', // 图片高度
                //     },
                //     }),
                //     ]

下面的代码测试了,也不报错,也没有任何显示。

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

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

相关文章

三菱FX5U PLC故障处理(各种出错的内容、原因及处理方法进行说明。)

对使用系统时发生的各种出错的内容、原因及处理方法进行说明。 故障排除的步骤 发生故障时,按以下顺序实施故障排除。 1.确认各模块是否正确安装或正确配线。 2、确认CPU模块的LED。 3.确认各智能功能模块的LED。(各模块的用户手册) 4、连接工程工具,启…

Golang | Leetcode Golang题解之第题432题全O(1)的数据结构

题目: 题解: type node struct {keys map[string]struct{}count int }type AllOne struct {*list.Listnodes map[string]*list.Element }func Constructor() AllOne {return AllOne{list.New(), map[string]*list.Element{}} }func (l *AllOne) Inc(ke…

分布式环境中,接口超时到底怎么处理?

目录标题 为什么会存在超时?如何应对可能发生的超时?1. 设置合理的超时时间2. 重试机制3. 熔断机制4. 监控和报警5. 日志记录6. 限流和降级7. 异步处理 以上总结 为什么会存在超时? 接口超时是分布式系统中常见的问题,其原因多种多样,涉及网络、服务…

深入探究PR:那些被忽视却超实用的视频剪辑工具

如果想要了解视频剪辑的工具,那一定听说过pr视频剪辑吧。如果你是新手其实我更推荐你从简单的视频剪辑工具入手,这次我就介绍一些简单好操作的视频剪辑工具来入门吧。 1.福晰视频剪辑 连接直达>>https://www.pdf365.cn/foxit-clip/ 这款工具操…

Docker 付费订阅价格大幅上调,免费订阅功能受限,云计算和安全产品有调整

云计算de小白 同时,免费的 Docker Personal 订阅将不再包含 Build Cloud 分钟数,支持范围将从三个 Scout 存储库变为仅一个,并且仅限于一个具有 2 GB 存储空间的私有 Docker Hub 容器注册存储库。 不过,Docker也对云计算和安全产…

【WPF】03 动态生成控件

说明 今天记录一篇关于动态生成控件的方法,也是反复查了一些资料,逐步完善成自己需要的方法,感觉还是比较好用的。通过这个需求,在网上也找了一些资料,发现了一个开源图形UI组件HandyControl,觉得比较好&a…

统信服务器操作系统【Cron定时任务服务】

Cron定时任务服务服务介绍、服务管理、服务配置 文章目录 一、功能概述二、功能介绍1. Cron 服务管理2.Cron 服务管理3.Cron 服务配置run-parts一、功能概述 cron是一个可以用来根据时间、日期、月份、星期的组合来 调度对周期性任务执行的守护进程。利用 cron 所提供的功能,可…

分布式环境中,接口超时重试带来的的幂等问题如何解决?

目录标题 幂等不能解决接口超时吗?幂等的重要性什么是幂等?为什么需要幂等?接口超时了,到底如何处理? 如何设计幂等?幂等设计的基本流程实现幂等的8种方案1.selectinsert主键/唯一索引冲突(常用)2.直接insert 主键…

【Oauth2整合gateway网关实现微服务单点登录】

文章目录 一.什么是单点登录?二.Oauth2整合网关实现微服务单点登录三.时序图四.代码实现思路1.基于OAuth2独立一个认证中心服务出来2.网关微服务3产品微服务4.订单微服务5.开始测试单点登录 一.什么是单点登录? 单点登录(Single Sign On&…

sql语法学习:关键点和详细解释

学习SQL语法是掌握数据库操作的基础。以下是SQL语法的一些关键点和详细解释: 1. SQL基础 SQL(Structured Query Language)是一种用于管理和操作关系型数据库的标准语言。它主要包括以下几个部分: 数据定义语言(DDL&…

全栈开发(五):初始化前端项目(nuxt3+vue3+element-plus)+前端代理

1.初始化前端项目 Nuxt3:搭建项目_nuxt3 项目搭建-CSDN博客、 2.配置代理 nuxt.config.ts // https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({devtools: { enabled: true },modules: ["element-plus/nuxt", "pinia/n…

智能PPT行业赋能用户画像

智能PPT市场在巨大的需求前景下,已吸引一批不同类型的玩家投入参与竞争。从参与玩家类型来看,不乏各类与PPT创作有关的上下游企业逐步向智能PPT赛道转型进入,也包括顺应生成式AI技术热潮所推出的创业企业玩家。当前,智能PPT赛道发…

在虚幻引擎中创建毛发/头发

在虚幻引擎中创建毛发/头发 , 首先开启两个插件 Groom 和 Alembic Groom Importer 打开蒙皮缓存 导出人物模型 将人物导入Blender , 选择需要种植头发的点 指定并选择 点击毛发 这里变成爆炸头了 , 把数量和长度调一下 切换到梳子模式 调整发型 导出为abc , 文件路径不…

基于opencv的车牌检测和识别系统(代码+教程)

车牌检测与识别技术详解 车牌检测和识别(License Plate Recognition, LPR)是一项重要的计算机视觉任务,它在交通管理、安全监控以及智能门禁系统等多个领域都有着广泛的应用。随着深度学习技术的发展,LPR系统的准确性和鲁棒性得到…

【算法业务】基于Multi-Armed Bandits的个性化push文案自动优选算法实践

1. 背景介绍 该工作属于多年之前的用户增长算法业务项目。在个性化push中,文案扮演非常重要的角色,是用户与push的商品之间的桥梁,文案是用户最直接能感知的信息。应该说在push产品信息之外,最重要的就是文案,直接能…

机器学习 | Scikit Learn中的普通最小二乘法和岭回归

在统计建模中,普通最小二乘法(OLS)和岭回归是两种广泛使用的线性回归分析技术。OLS是一种传统的方法,它通过最小化预测值和实际值之间的平方误差之和来找到数据的最佳拟合线。然而,OLS可以遭受高方差和过拟合时&#x…

Unreal Engine 5 C++: 插件编写03 | MessageDialog

在虚幻引擎编辑器中编写Warning弹窗 准备工作 FMessageDialog These functions open a message dialog and display the specified informations there. EAppReturnType::Type 是 Unreal Engine 中用于表示应用程序对话框(如消息对话框)返回结果的枚举…

vue.js 展示树状结构数据,动态生成 HTML 内容

展示树状结构数据: 从 jsonData 读取树状结构的 JSON 数据,将其解析并生成 HTML 列表来展示。树状结构数据根据 id 和 label 属性组织,节点可以包含子节点 children。 展示评级信息: 从预定义的表单字段 form 中读取 arRateFlag 和…

GS-SLAM论文阅读笔记--GLC-SLAM

前言 最近GS-SLAM回环检测的工作已经逐步发展了,看一下这篇新文章。 文章目录 前言1.背景介绍2.关键内容2.1 tracking2.2 local mapping2.3 Loop Closing2.4总体流程 3.文章贡献 1.背景介绍 现有的基于3dgs的SLAM方法往往存在累积的跟踪误差和地图漂移&#xff0c…

三菱FX5U CPU模块的初始化“(格式化PLC)”

1、连接FX5U PLC 1、使用以太网电缆连接计算机与CPU模块。 2、从工程工具的菜单选择[在线]中[当前连接目标]。 3、在“简易连接目标设置 Connection”画面中,在与CPU模块的直接连接方法中选择[以太网]。点击[通信测试]按钮,确认能否与CPU模块连接。 FX5…