【vxe-table】表格库

vxe-table 介绍

一个基于vue的PC端表格组件库，支持增删改查、虚拟滚动、懒加载、表单校验、树形结构、打印导出、表单渲染、数据分页等

• v3.0 基于 vue2.6+，支持现代浏览器并兼容IE11
• v4.0 基于 vue3.0+, 只支持现代浏览器，不支持IE

仓库、示例、文档入口

• vxe-table Gitee
• 查看示例
• 查看文档

安装及配置

# 全局安装 依赖 xe-utils vue 2.6x
npm install xe-utils@3 vxe-table@3 

# 引入及安装插件库
import Vue from 'vue'
import XEUtils from 'xe-utils' 
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)
// 把XEUTils绑定到this中，方便在组件中通过 this 访问使用 
Vue.prototype.$Utils = XEUtils

基础表格 vxe-table

<template>
  <vxe-table
    stripe
    highlight-current-row
    highlight-hover-row
    :data="tableData"
  >
    <vxe-table-column type="seq" width="60"></vxe-table-column>
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="sex" title="Sex"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }
      ]
    }
  }
}
</script>

高级表格 vxe-grid

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

<script>
export default {
  data() {
    return {
      gridOptions: { 
        resizable: true,
        showOverflow: true,   
        columns: [
          { type: "seq",  50 },
          { field: "name", title: "名称" },
          {
            field: "sex",
            title: "性别",
            showHeaderOverflow: true,
          }, 
        ],
        data: [
          {
            id: 10001,
            name: "Test1", 
            sex: "Man"
          },
          {
            id: 10002,
            name: "Test2", 
            sex: "Women"
          }
        ],
      },
    };
  },
};
</script>

vxe-table 和 vxe-grid 有什么区别

grid 包含 table全部功能，集成分页、表头json配置，更方便更简洁、整合代理自动触发接口。

说明	vxe-table(普通表格)	vxe-grid(高级表格)
用法	单元格	使用JSON配置{ fild: 'xx' }
动态列	√ 静态	√ 全动态JSON
自定义模板	√ 部分 (插槽)	√ 完整 (插槽、JSX、渲染函数)
表单		√ 集成
工具栏		√ 集成
分页		√ 集成
CRUD	√ 部分(新增、删除、修改)	√ 完整 (查询、新增、删除、修改、标记)
数据代理		√
全屏放大		√
数据校验	√	√
基础参数及事件	√	√
边框	√	√
序号	√	√
复选框、单选框	√	√
高亮行和列	√	√
格式化内容	√	√
筛选	√	√
多列排序	√	√
列宽拖动	√	√
分组表头	√	√
左右固定列	√	√
展开行	√	√
树形结构	√	√
按键导航	√	√
显示/隐藏列	√	√
右键快捷菜单	√	√
合并	√	√
导入	√	√
导出(xlsx,csv,html,xml,txt,pdf)	√	√
打印	√	√