如何使用 vxe-table grid 全配置式给单元格字段格式化内容,格式化下拉选项内容

如何使用 vxe-table grid 全配置式给单元格字段格式化内容,格式化下拉选项内容
公司的业务需求是自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。

官网:https://vxetable.cn

安装

npm install vxe-pc-ui@4.3.90 vxe-table@4.11.0
// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...

效果

在这里插入图片描述
配置参数: { name: ‘formatOption’, options: [], optionProps: { label: ‘label’, value: ‘value’ } }

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,showOverflow: true,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name', minWidth: 200 },{field: 'sex',title: 'Sex',width: 300,cellRender: {name: 'formatOption',options: [{ label: '女', value: '0' },{ label: '男', value: '1' }]}}],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: null },{ id: 10002, name: 'Test2', role: 'Test', sex: '0' },{ id: 10003, name: 'Test3', role: 'PM', sex: '1' },{ id: 10003, name: 'Test4', role: 'Test', sex: ['1'] },{ id: 10003, name: 'Test5', role: 'Develop', sex: ['1', '0'] }]
})
</script>

https://gitee.com/x-extends/vxe-table

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

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

相关文章

【弹性计算】IaaS 和 PaaS 类计算产品

《弹性计算产品》系列&#xff0c;共包含以下文章&#xff1a; 云服务器&#xff1a;实例、存储、网络、镜像、快照容器、裸金属云上运维IaaS 和 PaaS 类计算产品 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#xff0c;请给博主一个一键三连 &#x1f680;&#x1f680…

【Spring详解二】容器的基本实现

二、容器的基本实现 2.1 容器的基本用法 package com.xxx; public class Hello {public void sayHello() {System.out.println("Hello, spring");} } public static void main(String[] args) {//XmlBeanFactory 在 Spring3.1 以后废弃BeanFactory beanFactory ne…

计算机毕业设计Python考研院校推荐系统 考研分数线预测 考研推荐系统 考研可视化(代码+LW文档+PPT+讲解视频)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Ubuntu 系统 LVM 逻辑卷扩容教程

Ubuntu 系统 LVM 逻辑卷扩容教程 前言 在 Linux 系统中&#xff0c;LVM&#xff08;Logical Volume Manager&#xff09;是一种逻辑卷管理工具&#xff0c;允许管理员动态调整磁盘空间&#xff0c;而无需重启系统。 本文将详细介绍如何使用 LVM 扩容逻辑卷&#xff0c;以实现…

大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1)

大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) Apache Paimon 是一项流式数据湖存储技术&#xff0c;可以为用户提供高吞吐、低延迟的数据摄入、流式订阅以及实时查询能力。 读/写&#xff1a;Paimon 支持多种读/写数据和执行 OLAP 查询的方式。 对于读取&#x…

3分钟了解内外网文件传输:常见方法、注意事项有哪些?

内外网文件传输不仅是企业日常运营的基础设施&#xff0c;更是支持业务增长、创新和合规的关键工具。通过高效、安全的文件传输&#xff0c;企业能够更好地应对全球化协作、远程办公和数据安全等挑战&#xff0c;从而在竞争激烈的市场中保持领先地位。 一、内外网文件传输的常…

洛谷P11042 [蓝桥杯 2024 省 Java B] 类斐波那契循环数

像是这种填空题的话&#xff0c;就直接暴力还更加省时间&#xff0c;在本地算完后直接提交答案即可 #include<bits/stdc.h> using namespace std;const int N 10000000;bool isnumber(int n) {vector<int> a;int m n;while (n > 0) {a.push_back(n % 10);n / …

3月营销日历:开启春日盛宴,绽放生活魅力

关键营销节点∶惊蛰、女生节、妇女节、 植树节、315消费者权益日、春分 营销关键词 养生、女生魅力、感恩女性、环保、品质 01.重点关注品类 春季服饰&#xff1a;如轻薄外套、春装等&#xff0c;适合惊蛰后的市场需求&#xff1b; 美妆护肤&#xff1a;妇女节期间&#xf…

未来游戏:当人工智能重构虚拟世界的底层逻辑

未来游戏&#xff1a;当人工智能重构虚拟世界的底层逻辑 在《赛博朋克2077》夜之城的霓虹灯下&#xff0c;玩家或许已经注意到酒吧里NPC开始出现微表情变化&#xff1b;在《艾尔登法环》的开放世界中&#xff0c;敌人的战术包抄逐渐显露出类人智慧。这些细节预示着游戏产业正站…

知识拓展:设计模式之装饰器模式

装饰器模式拓展 1. 什么是装饰器模式&#xff1f; 装饰器模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。装饰器模式通过创建一个装饰类来包装原始类&#xff0c;从而在不修…

利用 OpenCV 进行棋盘检测与透视变换

利用 OpenCV 进行棋盘检测与透视变换 1. 引言 在计算机视觉领域&#xff0c;棋盘检测与透视变换是一个常见的任务&#xff0c;广泛应用于 摄像机标定、文档扫描、增强现实&#xff08;AR&#xff09; 等场景。本篇文章将详细介绍如何使用 OpenCV 进行 棋盘检测&#xff0c;并…

MySQL智障离谱问题,删了库确还存在、也不能再创建同名库

1、问题 今天跟后端朋友接毕设单子的时候&#xff0c;后端穿过来的【weather.sql】这个文件没弄好&#xff0c;导致这个【weather】数据库的数据是错的&#xff0c;因此我用datagrip的GUI界面直接右键删除&#xff0c;结果就是tmd删不掉&#xff0c;ok&#xff0c;我只能在那新…

高子昂医编---23岁,医疗编上岸,正式开启养老生活

作为一个只想毕业后就找个稳定工作躺平一生的普通人&#xff0c;直接放弃加入考研考公大军&#xff0c;加入了竞争稍微小一点的考编大军&#xff01;毕业那年在学校辛苦奋斗四个多月&#xff0c;直接一战上岸&#xff01;成为了一名有编制的医务工作者&#xff01;现在在我们家…

【Linux系统】—— 调试器 gdb/cgdb的使用

【Linux系统】—— 调试器 gdb/cgdb的使用 1 前置准备2 快速认识 gdb3 cgdb/gdb 的使用3.1 简单认识 cgdb3.2 打断点 / 删断点3.3 逐过程 / 逐语句3.4 查看变量3.5 快速跳转 4 cgdb/gdb 调试技巧4.1 watch4.2 「set var」确定问题原因4.3 条件断点 5 概念理解6 gdb/cgdb 指令一…

llama.cpp部署 DeepSeek-R1 模型

一、llama.cpp 介绍 使用纯 C/C推理 Meta 的LLaMA模型&#xff08;及其他模型&#xff09;。主要目标llama.cpp是在各种硬件&#xff08;本地和云端&#xff09;上以最少的设置和最先进的性能实现 LLM 推理。纯 C/C 实现&#xff0c;无任何依赖项Apple 芯片是一流的——通过 A…

【Vue3】Vue 3 中列表排序的优化技巧

本文将深入探讨 Vue 3 中列表排序的优化技巧&#xff0c;帮助提升应用的性能和响应速度。 1. 避免不必要的排序 按需排序 在实际应用中&#xff0c;并非每次数据更新都需要进行排序。例如&#xff0c;当列表数据仅在特定条件下需要排序时&#xff0c;可通过条件判断来避免不…

HaProxy源码安装(Rocky8)

haproxy具有高性能、高可用性、灵活的负载均衡策略和强大的将恐和日志功能&#xff0c;是法国开发者 威利塔罗(Willy Tarreau)在2000年使用C语言开发的一个开源软件&#xff0c;是一款具 备高并发(一万以上)、高性能的TCP和HTTP负载均衡器&#xff0c;支持基于cookie的持久性&a…

调用openssl实现加解密算法

由于工作中涉及到加解密&#xff0c;包括Hash&#xff08;SHA256&#xff09;算法、HMAC_SHA256 算法、ECDH算法、ECC签名算法、AES/CBC 128算法一共涉及5类算法&#xff0c;笔者通过查询发现openssl库以上算法都支持&#xff0c;索性借助openssl库实现上述5类算法。笔者用的op…

1-13 tortoiseGit忽略文件与文件夹

前言&#xff1a; 基于本人对小乌龟操作的学习和思考&#xff0c;仅供参考 1-1 忽略问价和文件夹 有时候我们的一些文件是不想要提交&#xff0c;那么我们可以使用stash的方式给这个文件添加忽略&#xff0c;那么我们现在来给这个实际操作创建一个操作的环境。 右键选中添加到忽…

✨2.快速了解HTML5的标签类型

✨✨HTML5 的标签类型丰富多样&#xff0c;每种类型都有其独特的功能和用途&#xff0c;以下是一些常见的 HTML5 标签类型介绍&#xff1a; &#x1f98b;结构标签 &#x1faad;<html>&#xff1a;它是 HTML 文档的根标签&#xff0c;所有其他标签都包含在这个标签内&am…