百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

推荐一个基于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

Bash
npm install xe-utils vxe-table@next

npm

Bash
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...