推荐一个基于Vue的表格插件:vxe-grid
xsobi 2024-11-23 10:48 16 浏览
00、背景
vxe-grid 非常好用,大部分功能都可以通过配置来完成。
以前很多需要手工实现的,都内置好了。
推荐理由至少有以下几点:
- template 部分的代码会大幅度变少
- 和ElementUI共同使用没有冲突
- 作者持续维护
01、效果
完整功能:
服务端排序代理、服务端筛选代理、服务端分页代理、服务端增删改查、服务端导入导出,由 vxe-grid 代理数据转换,只需要配置好数据源即可;
非常简单就可以渲染一个表格,从重复写冗余的代码中解放出来。以下截图所有UI都可以通过配置生成。
- 可以通过配置 form-config 实现动态表单,还可以通过 titlePrefix 或 titleSuffix 设置标题提示信息
- 对于分页场景下,如果想要保留选中状态,可以通过设置 checkbox-config 的 reserve 属性
- 通过 checkMethod 设置个性化列禁止勾选
02、vxe-table & vxe-grid
vxe-table
一款基于Vue的表格插件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...等功能
vxe-grid
vxe-table内置的一个组件。
优点
- 大数据表格
- 自带打印功能:区域、分页、模板、样式等打印功能
说明
- vxe-table 只能用于静态列(vxe-table-column,避免使用 v-for 去动态修改,如果要动态列(使用 v-grid)
- vxe-grid 支持一切动态场景
- grid 继承 table 100%的功能,vxe-grid 的性能也比 vxe-table 快一倍
- vue 多数情况还是推荐使用语义化标签的形式;而对于动态场景用 grid 就更加灵活,可以实现远程配置化一体化
设计理念
- 面向现代浏览器,高效的简洁 API 设计
- 模块化表格、按需加载
- 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能
安装
版本:vue 3.x
npm install xe-utils vxe-table@next
npm
import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app')
示例:在 Vue 组件中使用 Vxe-table
<template>
<div>
<vxe-table :data="tableData">
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-colgroup title="Group1">
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const tableData = ref([
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
</script>
示例:在 Vue 组件中使用 Vxe-grid
<template>
<div>
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
</div>
</template>
相关推荐
- 大学生想学习C语言,怎么快速入门?
-
初学者学习编程,看视频的效果会更好一些,边看视频边敲代码。很多知识点通过老师的讲解会更容易理解,在学习的过程中,做好笔记,每天保证一定的代码量,定期回去复习,对知识点进行归纳,总结。以前学习C语言的时...
- C语言的简单了解及学习2(c语言的一些基本知识)
-
在上一章我们了解C语言的基本结构并手写了第一个C程序,当然由于一些操作上的失误,导致了未能给大家展示编写程序的截图。哦,还有小伙伴问我用的什么软件,我现在在用dev。上一章的截图那么我们也要开始对今天...
- C语言学习笔记系列—第八章(c语言基础知识第三章)
-
小编这周一直在复习准备今天的考试,考试情况总结来说“不容乐观”。顿悟了顺应时代发展,要加速云改数转技术转型了。以上都是小编的吐槽;C语言还是要继续学习下去啦!下面进入第八章的学习内容了,这章内容主要是...
- C语言学习方法(c语言如何学)
-
C语言学习方法在前面http://sunxiunan.com/?p=1597曾经提到过一个比较系统学习一门新的编程语言的方式,C语言学习也可以按照类似的顺序:阅读参考书,阅读代码,编写调试实际程序,...
- C 语言流程控制语句学习,三大结构基础知识点学习与实践操作掌握
-
在C语言的程序设计领域,如同搭建一座错综复杂的大厦,而顺序结构、选择结构和循环结构就是构建这座大厦的基石。它们看似简单,却蕴含着无穷的力量,决定了程序运行的走向与逻辑。理解这些结构的概念与作用,不...
- C语言开发《浪漫流星雨》表白程序,源码来了
-
浪漫表白效果:开发环境:VisualStudio2019+EasyX图形库插件即可源码展示:#include<stdio.h>#include<math.h>...
- 高分收藏!C语言初学者必看——内存与指针的指南
-
C语言是机器亲和的,也就是说,在大多数情况下,它是要去迁就机器的。如果想学迁就人的语言,可以去学PHP,Python,Go,Java等。工具与原理指针与内存都是c语言中的要点与难点内存是一维线性排列的...
- C语言编程工具软件推荐!(c语言编程软件app)
-
1、VS(VisualStudio)[VS是目前最受欢迎的适用于Windows平台应用程序的综合开发环境,由于大多数同学使用的都是Windows操作系统,因此VS非常适合大家。在日常课堂和考试中,我...
- 编程入门:零基础想要学好C/C++编程?一定要看看这五个步骤
-
零基础想要学好C/C++编程?那就赶紧看看吧!1、学习C/C++编程语言基础掌握语言基础是第一步,如果不了解基础知识,那么就不知道自己是否做错了或者接下来该怎么做。掌握C/C++相关的基础知识,如C语...
- 九、c语言学习难点之指针(c语言指针详解例题)
-
指针和数组应该算是C语言的精华及难点,很多初学者都是被这一章节难倒的,包括作者在内,也不敢说在指针上就真的全懂了。只能在此抛砖引玉,希望讲讲基础知识,有大神看到了能够扩展高级应用。在介绍数组和指针之前...
- C语言学习篇(15)-----函数传参详解
-
前面我们已经介绍过什么是指针,指针变量的用法等等,今天我们就来讲讲什么是函数,函数有啥作用,函数的参数有哪些需要注意的地方以及指针与函数的关系。首先函数是由一些代码块组成,这些代码往往都是为了完成某个...
- 0基础学习C语言第五章:输入与输出
-
当我们提到输入时,这意味着要向程序填充一些数据。输入可以是以文件的形式或从命令行中进行。C语言提供了一系列内置的函数来读取给定的输入,并根据需要填充到程序中。当我们提到输出时,这意味着要在屏幕上、打...
- 【c语言学习笔记】选择结构(c语言选择结构的作用)
-
C语言学习笔记之选择结构在选择结构中,C语言提供了两种主要的决策语句:if语句和switch语句。这两种语句可以根据特定的条件来执行不同的代码块,从而实现程序的分支处理。(新手小白程序员,有错请指正)...
- 适合零基础初学者学习C语言第一课教程,揭开C语言的神秘面纱
-
一、C语言简介我刚接触编程,首先想要学习的就是C语言,这次我就把我的感悟用我自己理解的文字表述出来,这样对刚学C语言的人来说,才是比较友好的。因为我们都没有C语言的基础,不懂啥是编程,啥事代码。我们...
- c语言学习笔记-函数(c语言函数基础知识)
-
函数的格式intmain(void)//函数头格式返回值类型函数名(形参列表)返回值类型可以省略,省略时默认为int类型{return0;//函数体具体执行的代码,如果有返回值用ret...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)