菜单 搜索
首页 前端知识 推荐一个国内的 vue 中最好用的表格 vxe-table grid 在线编辑表格

推荐一个国内的 vue 中最好用的表格 vxe-table grid 在线编辑表格

2025-02-27 11:02:13 前端知识 前端哥 724 373 我要收藏

官网地址： Vxe Table Vxe UI
github 链接以下
https://github.com/x-extends/vxe-table
https://gitee.com/xuliangzhan/vxe-table

vxe-table 是一个支持 vue2 和 vue3 的全功能表格，不仅支持常用表格功能，而且对大量数据的渲染性能也很好，功能也最强大的，不管是表格编辑、树表格，右键菜单、导入导出等都支持。
以前公司都是用内部封装的表格，后来业务越来越复杂，好多功能没法实现，性能也越来越差，几十条就开始卡了。后来找了一圈，原生的虽然性能更强，但是开发成本使用难度太高。功能也比较单一，直接放弃了。也有 canvas 封装的表格，性能也更强，但是自定义功能太弱，不能仅仅为了渲染性能而造成业务无法实现或者实现难度太大。对比下来只有 vxe-table 可选择，渲染性能非常强，功能就更强了，基本上有的功能都能自定义扩展。不过也有一些通病，比如固定列多了可能没那么流畅。
官网文档非常详细，功能太多，具体可以去官网查看。

vue 2 对应 vxe 3.x、vue3 对应 vxe 4.x

npm install vxe-table@4.7.85 vxe-pc-ui@4.2.15

我的项目是 vue3 版本，使用方式是

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')

基础功能

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    const gridOptions = {
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name' },
        { field: 'sex', title: 'Sex' },
        { field: 'age', title: 'Age' }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

表尾合计

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    const gridOptions = {
      border: true,
      loading: false,
      height: 400,
      showFooter: true,
      showOverflow: true,
      columns: [
        { field: 'seq', type: 'seq', width: 70 },
        { field: 'name', title: 'Name', minWidth: 400 },
        { field: 'role', title: 'Role', width: 300 },
        { field: 'sex', title: 'Sex', width: 100 },
        { field: 'num', title: 'Num', width: 120 },
        { field: 'address', title: 'Address', minWidth: 300 }
      ],
      data: [],
      footerData: [
        { seq: '合计', num: '-' },
        { seq: '平均', num: '-' }
      ]
    }
    return {
      gridOptions
    }
  },
  methods: {
    // 模拟后端接口
    loadList () {
      this.gridOptions.loading = true
      setTimeout(() => {
        this.gridOptions.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' }
        ]
        this.gridOptions.footerData = [
          { seq: '合计', num: '￥282' },
          { seq: '平均', num: '2.88 元' }
        ]
        this.gridOptions.loading = false
      }, 3000)
    }
  },
  created () {
    this.loadList()
  }
}
</script>

自定义列功能

支持显示隐藏列、拖拽列排序、冻结列等
支持本地或服务端保存用户自定义配置
在这里插入图片描述

筛选

支持普通列表筛选
也可以自定义渲染，实现复杂筛选功能

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

排序

支持单列排序，多列排序，前端排序，后端排序等，建议使用后端排序，只需将排序的结果传给接口就行了，后端排序这样可以支持分页功能。
在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions" @sort-change=sortChangeEvent></vxe-grid>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    const gridOptions = {
      border: true,
      height: 300,
      sortConfig: {
        multiple: true
      },
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', sortable: true },
        { field: 'role', title: 'Role', sortable: true },
        { field: 'num', title: 'Num', sortable: true }
      ],
      data: [
        { name: '小红', role: '前端', num: 7 },
        { name: '老王', role: '后端', num: 6 },
        { name: '小红', role: '后端', num: 1 },
        { name: '小明', role: '前端', num: 2 },
        { name: '老徐', role: '测试', num: 3 },
        { name: '老王', role: '前端', num: 3 },
        { name: '老徐', role: '测试', num: 4 },
        { name: '小明', role: '前端', num: 4 },
        { name: '小明', role: '前端', num: 8 },
        { name: '小明', role: '测试', num: 6 },
        { name: '小红', role: '后端', num: 9 },
        { name: '老徐', role: '前端', num: 5 },
        { name: '老徐', role: '测试', num: 1 },
        { name: '小红', role: '前端', num: 4 },
        { name: '小红', role: '前端', num: 2 },
        { name: '小明', role: '测试', num: 3 },
        { name: '老王', role: '前端', num: 6 },
        { name: '老王', role: '后端', num: 4 },
        { name: '老徐', role: '前端', num: 8 },
        { name: '小明', role: '测试', num: 7 }
      ]
    }
    return {
      gridOptions
    }
  },
  methods: {
    sortChangeEvent ({ sortList }) {
      console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
    }
  }
}
</script>

工具栏

支持直接配置查询、刷新、打印、导出、导入、自定义列等，这个功能也是项目中最常用的，非常方便。

在这里插入图片描述
在这里插入图片描述

树表格

不管是单选、多选，分组、都能支持，支持功能非常多

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    const gridOptions = {
      border: true,
      treeConfig: {
        transform: true,
        rowField: 'id',
        parentField: 'parentId'
      },
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', minWidth: 300, treeNode: true },
        { field: 'size', title: 'Size' },
        { field: 'type', title: 'Type' },
        { field: 'date', title: 'Date' }
      ],
      data: [
        { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
        { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
        { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
        { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
        { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },
        { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
        { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
        { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },
        { id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },
        { id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

单元格编辑

支持单元格、行编辑模式，以及校验功能，都是直接支持的，配置就行

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    const gridOptions = {
      border: true,
      showOverflow: true,
      editConfig: {
        trigger: 'click',
        mode: 'cell'
      },
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', editRender: { name: 'input' } },
        { field: 'sex', title: 'Sex', editRender: { name: 'input' } },
        { field: 'age', title: 'Age', editRender: { name: 'input' } }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

编辑状态

编辑过的单元格会自动在左上角显示标识

在这里插入图片描述

单元格校验

只需要配置好校验规则，调用表格 validate 方法就可以完成校验

在这里插入图片描述

表格搜索

按照官网例子就可以很简单实现纯前端搜索功能
在这里插入图片描述
在这里插入图片描述

右键菜单

在这里插入图片描述

导出 excel

在这里插入图片描述

大量数据加载

加载5万行，大概 125毫秒

在这里插入图片描述
加载10万行，大概 224毫秒
在这里插入图片描述

<template>
  <div>
    <p>
      <vxe-button @click="loadList(1000)">1k行</vxe-button>
      <vxe-button @click="loadList(5000)">5k行</vxe-button>
      <vxe-button @click="loadList(10000)">1w行</vxe-button>
      <vxe-button @click="loadList(50000)">5w行</vxe-button>
      <vxe-button @click="loadList(100000)">10w行</vxe-button>
    </p>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { VxeUI } from 'vxe-table'
export default {
  data () {
    const gridOptions = {
      border: true,
      showOverflow: true,
      height: 800,
      loading: false,
      scrollY: {
        enabled: true,
        gt: 0
      },
      columns: [
        { type: 'seq', title: '序号', width: 100 },
        { field: 'name', title: 'Name', minWidth: 180 },
        { field: 'role', title: 'Role', width: 200 },
        { field: 'num', title: 'Num', width: 200 },
        { field: 'address', title: 'Address', width: 200 }
      ],
      data: []
    }
    return {
      gridOptions
    }
  },
  methods: {
    // 模拟行数据
    loadList (size = 200) {
      this.gridOptions.loading = true
      setTimeout(() => {
        const dataList = []
        for (let i = 0; i < size; i++) {
          dataList.push({
            id: i,
            name: `名称${i} 名称名称 称`,
            role: `role ${i}`,
            num: 20,
            address: 'shenzhen shen'
          })
        }
        const $grid = this.$refs.gridRef
        if ($grid) {
          const startTime = Date.now()
          $grid.loadData(dataList).then(() => {
            VxeUI.modal.message({
              content: `加载时间 ${Date.now() - startTime} 毫秒`,
              status: 'success'
            })
            this.gridOptions.loading = false
          })
        }
      }, 350)
    }
  },
  created () {
    this.loadList(500)
  }
}
</script>

表单部分

表格支持完全配置式。非常适用于低代码平台或者配置化场景

在这里插入图片描述

<template>
  <div>
    <vxe-form v-bind="formOptions" v-on="formEvents" ></vxe-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const formOptions = reactive({
  data: {
    name: 'test1',
    nickname: 'Testing',
    sex: '',
    age: ''
  },
  items: [
    { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } },
    {
      align: 'center',
      span: 24,
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { type: 'submit', content: '提交', status: 'primary' },
          { type: 'reset', content: '重置' }
        ]
      }
    }
  ]
})
const formEvents = {
  submit () {
    VxeUI.modal.message({ content: '保存成功', status: 'success' })
  },
  reset () {
    VxeUI.modal.message({ content: '重置事件', status: 'info' })
  }
}

</script>

上下布局

支持左右、上下、各种灵活布局
在这里插入图片描述

分组、分行

在这里插入图片描述
在这里插入图片描述

折叠表单

在这里插入图片描述
在这里插入图片描述

<template>
  <div>
    <vxe-form v-bind="formOptions" v-on="formEvents" ></vxe-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const formOptions = reactive({
  titleWidth: 100,
  titleColon: true,
  titleAlign: 'right',
  data: {
    name: 'test1',
    role: '',
    nickname: 'Testing',
    sex: '',
    age: '',
    num: '',
    createDate: '',
    updateDate: ''
  },
  items: [
    { field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'nickname', title: '昵称', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'role', title: '角色', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
    { field: 'sex', title: '性别', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
    { field: 'age', title: '年龄', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
    { field: 'num', title: '大小', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
    { field: 'createDate', title: '创建时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
    { field: 'updateDate', title: '更新时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
    {
      align: 'center',
      span: 24,
      collapseNode: true,
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { type: 'submit', content: '搜索', status: 'primary' },
          { type: 'reset', content: '重置' }
        ]
      }
    }
  ]
})
const formEvents = {
  submit () {
    VxeUI.modal.message({ content: '搜索', status: 'success' })
  }
}

</script>

实现简历模板

在这里插入图片描述

具体代码看文档就行

转载请注明出处或者链接地址：https://www.qianduange.cn//article/21755.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

腾讯云cos 临时密钥 适用于前端直传等临时授权场景

2025-02-27 11:02:42

期权帮|股指期货基差和价差有什么区别？

2025-02-27 11:02:42

Opencv [去除水印]

2025-02-27 11:02:42

系统架构设计：软件测试需要掌握的常用方法

2025-02-27 11:02:41

0基础学前端-----CSS DAY13

2025-02-27 11:02:41

更改conda 环境默认安装位置

2025-02-27 11:02:40

蓝桥杯之日期题

2025-02-27 11:02:39

模拟算法.

2025-02-27 11:02:39

【C 笔记】C 11智能指针的使用及其原理

2025-02-27 11:02:39

计算机毕业设计Hadoop Spark DeepSeek-R1大模型民宿推荐系统 hive民宿可视化 民宿爬虫 大数据毕业设计(源码 文档 PPT 讲解)

2025-02-27 11:02:39

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
3

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
4

CSS常用属性（文本属性）

2024-11-04 09:11:111000
5

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
6

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
7

vue使用datav echarts

2024-09-06 00:09:381000
8

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
9

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
10

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！