Vxe UI vue vxe-table vxe-grid 单元格与表尾单元格如何格式化数据
Vxe UI vue vxe-table vxe-grid 单元格与表尾单元格如何格式化数据
查看 github
vxe-table 官网
单元格内容格式化
通过 formatter 属性自定义格式化方法
<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'
import XEUtils from 'xe-utils'
const sexList = [{ label: '女', value: '0' },{ label: '男', value: '1' }
]
const gridOptions = reactive({border: true,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{field: 'num',title: 'Num',formatter ({ cellValue }) {return XEUtils.commafy(Number(cellValue), { digits: 2 })}},{field: 'sex',title: 'Sex',formatter ({ cellValue }) {const item = sexList.find(item => item.value === cellValue)return item ? item.label : cellValue}},{field: 'time',title: 'Time',formatter ({ cellValue }) {return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')}}],data: [{ id: 10001, name: 'Test1', bankCard: '6222525678789432', sex: '0', time: 1599320111520, date: '2020-11-14T07:14:41.000Z', amount: 998.3, num: 863.345, num7: 863.345, num8: 863.345, num9: 863.345 },{ id: 10002, name: 'Test2', bankCard: '6222525675674564', sex: '1', time: 1590820967410, date: '2022-10-24T08:14:18.000Z', amount: 777776536.3, num: 854.7789, num7: 854.7789, num8: 854.7789, num9: 854.7789 },{ id: 10003, name: 'Test3', bankCard: '6222525477686963', sex: '0', time: 1599390785410, date: '2020-09-04T06:08:25.000Z', amount: 253.486, num: 963.1456, num7: 963.1456, num8: 963.1456, num9: 963.1456 },{ id: 10004, name: 'Test4', bankCard: '6222525678678946', sex: '1', time: 1597385230710, date: '2019-10-20T20:40:20.000Z', amount: 9990000.66, num: 963.9856, num7: 963.9856, num8: 963.9856, num9: 963.9856 }]
})</script>

表尾单元格内容格式化
通过 footerFormatter 属性自定义格式化方法
<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'
const gridOptions = reactive({border: true,showFooter: true,height: 300,columns: [{ field: 'seq', type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'sex', title: 'Sex' },{field: 'num',title: 'Num',footerFormatter ({ itemValue }) {return `¥${itemValue}元`}},{ field: 'address', title: 'Address', showOverflow: true }],data: [{ id: '10001', name: 'Test1', role: 'Develop', sex: 'Man', num: '28', address: 'test abc' },{ id: '10002', name: 'Test2', role: 'Test', sex: 'Women', num: '22', address: 'Guangzhou' },{ id: '10003', name: 'Test3', role: 'PM', sex: 'Man', num: '32', address: 'Shanghai' },{ id: '10004', name: 'Test4', role: 'Designer', sex: 'Women', num: '24', address: 'Shanghai' },{ id: '10005', name: 'Test5', role: 'Develop', sex: 'Man', num: '42', address: 'Guangzhou' },{ id: '10006', name: 'Test6', role: 'Test', sex: 'Women', num: '39', address: 'Shanghai' },{ id: '10007', name: 'Test7', role: 'Develop', sex: 'Man', num: '46', address: 'Shanghai' },{ id: '10008', name: 'Test8', role: 'PM', sex: 'Women', num: '49', address: 'Guangzhou' }],footerData: [{ seq: '合计', num: '282' }]
})
</script>

相关文章:
Vxe UI vue vxe-table vxe-grid 单元格与表尾单元格如何格式化数据
Vxe UI vue vxe-table vxe-grid 单元格与表尾单元格如何格式化数据 查看 github vxe-table 官网 单元格内容格式化 通过 formatter 属性自定义格式化方法 <template><div><vxe-grid v-bind"gridOptions"></vxe-grid></div> </t…...
【百日算法计划】:每日一题,见证成长(021)
题目 栈排序 编写程序,对栈进行排序使最小元素位于栈顶。最多只能使用一个其他的临时栈存放数据,但不得将元素复制到别的数据结构(如数组)中。该栈支持如下操作:push、pop、peek 和 isEmpty。当栈为空时,p…...
数据恢复篇:如何恢复几年前删除的照片
您是否曾经遇到过几年前删除了一张图片并觉得需要恢复旧照片的情况?虽然,没有确定的方法可以丢失或删除的照片。但是,借助奇客数据恢复等恢复工具,可以恢复多年前永久删除的照片、视频和音频文件。 注意 – 如果旧数据被覆盖&…...
前端注释规范
1、目的和原则 提高可读性和可维护性 如无必要,无增注释;如有必要,尽量详尽 2、语法 单行注释: // 多行注释: /**/ 3、规范 1、注释符与注释内容之间加一个空格 2、注释行与上方代码间加一个空行 4、Javascript …...
uniapp踩坑 tabbar页面数据刷新了但视图没有更新
问题描述: 有个uni-data-checkbox组件,两个选项:选项1和选项2(对应的value值分别为1和2),v-model绑定属性名为value 两个tabbar页面:tab1,tab2。 tab1页面有个逻辑是在onShow中刷新v…...
WebAssembly与WebGPU:游戏开发的新时代
文章目录 WebAssembly简介WebGPU简介Wasm WebGPU 在游戏开发中的优势创建一个简单的WebAssembly模块使用WebGPU绘制一个三角形WebAssembly 的高级特性内存管理异步加载与多线程 WebGPU 的高级特性着色器编程计算着色器 实战案例:创建一个简单的 2D 游戏游戏逻辑设计…...
SAP B1 认证考试习题 - 解析版(二)
前一篇:《SAP B1 认证考试习题 - 解析版(一)》 题目纯享版合集:《SAP B1 认证考试习题 - 纯享版》 三、采购流程 30. 下列哪个凭证在采购流程中是必须要完成的 A. 采购订单 B. 收货采购订单 C. 应付发票 D. 退货 E. 应付贷…...
《Ubuntu20.04环境下的ROS进阶学习7》
一、使用nav_msgs消息包显示小车轨迹 在我们跑实验的时候通常希望看到小车的轨迹,在ROS1中可以将小车的路径存储在nav_msgs::Path 这种消息类型里,发布出来后使用rviz来显示小车轨迹。 二、了解nav_msgs消息包 那么首先我们要来了解一下nav_msgs这个消息…...
免费视频无损压缩工具+预览视频生成工具
视频无损压缩工具 功能与作用 :视频无损压缩工具是一种能够减少视频文件大小,但同时保持视频质量的工具。它通过先进的编码技术和算法,有效降低视频文件的存储空间,同时保证视频的清晰度和观感。这对于需要分享或存储大量视频内容…...
OIDC9-OIDC集成登录功能(SpringBoot3.0)
1.项目依赖 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <…...
使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、目录结构二、代码1. 创建 m-Toast.vue 文件2. 创建 global.js 文件3. 在 main.js 文件中导入 global.js 文件4. 在 App.vue 文件中使用 全局方法创建的 组件 前言 在此之前一直不明白Vue.extend( )干什么用的…...
ansible部署二进制mysql 8
1、配置文件 ll /ansible -rw-r--r-- 1 root root 836 Sep 22 12:09 my.cnf -rw-r--r-- 1 root root 810 Sep 22 07:21 mysql.service -rw-r--r-- 1 root root 2731 Sep 22 12:32 mysql.yam2、my.cnf内容 rootbole:/ansible# cat my.cnf [mysql] #设置m…...
【2023工业3D异常检测文献】基于混合融合的多模态工业异常检测方法Multi-3D-Memory (M3DM)
Multimodal Industrial Anomaly Detection via Hybrid Fusion 1、Background 随着3D传感器的发展,最近发布了具有2D图像和3D点云数据的MVTec-3D AD数据集,促进了多模态工业异常检测的研究。 无监督异常检测的核心思想是找出正常表示与异常之间的差异。…...
基于微信小程序的宿舍报修系统的设计与实现(lw+演示+源码+运行)
摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对成果信息管理混乱,出错率高,信息安全性差&am…...
前端练习总结(1)
前端实习练习题 前端实习笔试题0920 visibility:hidden display:none把鼠标移到按钮并点击时 hover active focus的顺序代码输出结果1代码输出结果2CSS中哪些属性可以继承cookie sessionStorage localstorage区别面向对象基本特征有哪些,请具体说明下列关于v-model的说法,哪项…...
计算机网络自顶向下(1)---网络基础
目录 1.网络的分类 2.网络协议 3.网络分层结构 1.OSI七层模型 2.TCP/IP四层模型 3.网络与OS的关系 4.网络传输基本流程 1.协议报头 5.网络中的地址管理 1.IP地址 2.端口号 6.传输层协议 1.TCP协议 2.UDP协议 3.网络字节序 7.socket 1.网络的分类 局域网&…...
Pandas -----------------------基础知识(五)
索引和列操作函数缺失值 索引和列操作 # 1 加载数据 # 1.1 从链家租房数据集中获取天通苑租房区域的所有数据存储在df2中 # 1.2 从df2中获取价格列存储在df2_price对象 import pandas as pd df pd.read_csv(/root/pandas_code_ling/data/b_LJdata.csv) df2 df[df[区域] 天通苑…...
RabbitMQ 高级特性——重试机制
文章目录 前言重试机制配置文件设置生命交换机、队列和绑定关系生产者发送消息消费消息 前言 前面我们学习了 RabbitMQ 保证消息传递可靠性的机制——消息确认、持久化和发送发确认,那么对于消息确认和发送方确认,如果接收方没有收到消息,那…...
每天一道面试题(20):锁的发生原因和避免措施
死锁的发生原因和避免措施 一、概述 在多线程编程中,死锁是一个常见的问题。理解死锁的成因和避免策略是提升程序稳定性和性能的重要能力。 二、普通人 vs 高手的回答 普通人回答: “临场发挥…” 高手回答: “死锁是指两个或多个线程在执…...
2024淘宝双11活动,收下这份必买好物推荐清单
双11如何真正值得购买的好物呢?为了帮助大家把握住这次难得的购物良机,我们特别推出了这份“2024淘宝双11必买好物推荐清单”。这份清单涵盖数码电子、家居生活、个护健康等多个领域的优质产品。无论你是科技爱好者,还是注重生活品质的消费者…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ,不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源(最常用) conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...
图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...
PydanticAI快速入门示例
参考链接:https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...
