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

推荐一个基于Vue的表格插件:vxe-grid

xsobi 2024-11-23 10:48 18 浏览

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>

相关推荐

5.5英寸触屏,搭载“安卓系统”的智能计算器评测:这设计挺脑洞

“计算器”可以说是我们日常生活中较为常用的一款电子产品,纵使手机上也有计算器功能,且足以替代实物计算器,但现在还是有很多人习惯用实物计算器,例如;做批发的店铺老板,计算器就放在店铺显眼位置,结账时顺手...

Android之父晒新款手机,造型酷似遥控器

安迪·鲁宾大家可能并不陌生,鲁宾曾一手创建了安卓操作系统,被外界誉为“安卓之父”。2015年鲁宾又创立智能手机公司EssentialProductsInc,还获得亚马逊和腾讯的投资。在筹备两年后,...

WP8.1的IE11为何不支持淘宝网触屏版?

IT之家(www.ithome.com):WP8.1的IE11为何不支持淘宝网触屏版?众所周知IE浏览器有自己的一个内核(简称IE内核),WP8.1系统的自带移动版IE11浏览器,但为什么iOS、An...

手机屏幕失灵乱跳乱点,屏幕时好时坏是怎么回事?

我们平时在使用手机的时候,如果我们的手机经常出现屏幕不受控制,手机屏幕会出现乱跳自己乱点的一些情况,这是什么问题呢?出现这种问题我们应该怎么去解决呢,今天我们九一手机维修就来跟大家说说这个问题该怎样去...

跨界表演有风险,百事手机 P1 众筹宣告失败

大家还记得曾经轰动一时的百事手机P1吗?这款10月份曝光、11月份众筹的手机在京东众筹失败,已经退款。想要喝着百事可乐玩着百事手机的网友,赶紧该干嘛干嘛去吧。据悉,百事可乐P1采用铝合金...

“傀儡”病毒感染超10万台手机

本报讯(记者孙奇茹)手机在没人操作的情况下,竟然自己亮屏、执行一些动作。这不是闹鬼,而是手机中毒了。日前,猎豹移动安全实验室发出警报,全球首个伪造模拟用户操作的安卓病毒被截获,并被命名为“傀儡(Go...

Android事件分发机制

事件分发机制Android事件分发是指在Android系统中,当用户触摸屏幕或执行其他操作时,系统如何将这些事件传递给正确的视图或组件进行处理的过程。Android事件分发遵循一种称为"事件分...

Android让视图像玻璃一样破裂

AndroidUILibs之BrokenView1.说明BrokenView让视图产生玻璃破裂的效果。注意:该库只能在API14以上的设备上运行2.配置在模块的build.gradle上面添加...

车载大屏爽翻了?英国研究机构:大尺寸触摸屏比酒驾更危险

大屏不仅蔓延到手机,汽车也不例外,得益于更加直观的人机交互体验,车载触控大屏逐渐成为越来越多车企的主流选择。然而最新的一项研究证明——触控大屏比酒驾、毒驾更危险。日前,英国一项道路安全研究报告指出,当...

安卓系统被曝严重安全漏洞 恶意程序竟能秘密拍照或录制音视频

央视网消息:据今日俄罗斯网站20号报道,以色列一家知名网络安全公司宣称发现谷歌、三星等制造商生产的安卓手机,系统存在严重安全漏洞,黑客能够在未经手机机主许可的情况下,操控安卓手机秘密拍摄照片、录制视...

央视曝光:安卓系统曝漏洞!有人可能正在用你的手机...

近日,谷歌、三星等制造商生产的安卓手机,被曝出系统存在严重安全漏洞。黑客能够在未经手机机主许可的情况下,操控安卓手机秘密拍摄照片、录制音视频并上传。点击下方,先看视频↓↓↓视频来源:央视新闻利用漏洞!...

安卓系统曝漏洞!有人可能正在用你的手机秘密拍照

近日,谷歌、三星等制造商生产的安卓手机,被曝出系统存在严重安全漏洞。黑客能够在未经手机机主许可的情况下,操控安卓手机秘密拍摄照片、录制音视频并上传。利用漏洞“恶意应用程序”拍照、录音视频并上传据今日俄...

安卓用户注意了 你的爱机可能会面临新式恶意攻击

据外媒报道,最近,东京早稻田大学的三名学者称,现代Android智能手机容易受到一种名为“Tap'nGhost”的新型攻击,这种攻击可以使不存在的“手指”点击手机屏幕,以采取行动。“Tap'nGh...

Android学习之Touch事件的处理

在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里...

办公小技巧:制作模糊查询效果Excel下拉菜单

在Excel单元格中输入特定范围的内容时,一般会利用数据有效性生成下拉列表的方式进行,但如果源列表的内容太多(比方说有数百个),这时再通过下拉列表查找需要的值就很不方便了。如果采用智能感知的模糊查询下...