vxe-table | 一款基于vuejs的功能强大的PC端表格组件


源码介绍

简要教程

VXE Table是一款基于vuejs的功能强大的PC端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。

版本说明:

v4.0 基于 vue3.2+,只支持现代浏览器,不支持 IE

v3.0 基于 vue2.6+,支持现代浏览器并保留兼容 IE11

VXE Table的特点有:

  • 基础表格
  • 高级表格
  • 斑马线条纹、多种边框、单元格样式
  • 列宽拖动、最大高度、自适应宽高、固定列
  • 多级表头、表尾数据
  • 高亮行或列
  • 序号、单选框、复选框、下拉选项
  • 开关、排序、筛选
  • 合并单元格、合并表尾
  • 导入/导出/打印
  • 显示/隐藏列
  • 格式化内容
  • 自定义插槽 - 模板
  • 快捷菜单
  • 展开行、分页、表单、工具栏
  • 下拉容器、虚拟列表、增删改查
  • 树表格
  • 数据校验、数据代理
  • 键盘导航、模态窗口
  • 渲染器
  • 虚拟滚动、虚拟合并
  • (pro) 单元格区域选取
  • (pro) 单元格复制/粘贴
  • (pro) 单元格查找和替换

VXE Table

使用方法

安装

如果您想使用VXE Table,首先您需要安装它,命令如下:

// 版本:v4.0, 依赖库:vue 3.2+, xe-utils
npm install xe-utils vxe-table@next
		
使用
import { App, createApp } = 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

function useTable (app: App) {
  app.use(VXETable)

  // 给 vue 实例挂载内部对象,例如:
  // app.config.globalProperties.$XModal = VXETable.modal
  // app.config.globalProperties.$XPrint = VXETable.print
  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
  // app.config.globalProperties.$XReadFile = VXETable.readFile
}

createApp(App).use(useTable).mount('#app')
		

示例代码:

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

更多详情请参考官网https://vxetable.cn/

github网址:https://github.com/x-extends/vxe-table



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部