boom-vxe-table
TypeScript icon, indicating that this package has built-in type declarations

2.9.403 • Public • Published

vxe-table

gitee star npm version npm build npm downloads gzip size: JS gzip size: CSS
issues issues closed pull requests pull requests closed npm license

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

  • 设计理念

    • 面向现代浏览器,高效的简洁 API 设计
    • 模块化表格、按需加载、扩展接口
    • 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能
  • 计划

    • [x] v1.0 100% 实现表格的一切实用的功能
    • [x] v2.0  100% 性能优化,同时兼具功能与性能
    • [x] v3.0   60% 内部重构,不再支持 IE,渲染性能提升
    • [ ] v4.0   0% 基于 Vue3 重构,渲染性能提升

👉 如果有更好的建议、优化点或 Bug 都欢迎提 Issues

Browser Support

IE Edge Chrome Firefox Opera Safari
11+ Latest Latest Latest Latest Latest

Features

  • [x] Basic table (基础表格)
  • [x] Grid (高级表格)
  • [x] Striped (斑马线条纹)
  • [x] Table with border (多种边框)
  • [x] Cell style (单元格样式)
  • [x] Column resizable (列宽拖动)
  • [x] Maximum table height (最大高度)
  • [x] Resize height and width (自适应宽高)
  • [x] Fixed column (固定列)
  • [x] Grouping table header (多级表头)
  • [x] Table footer (表尾数据)
  • [x] Highlight row and column (高亮行、列)
  • [x] Table sequence (序号)
  • [x] Radio (单选框)
  • [x] Checkbox (复选框)
  • [x] Select (下拉选项)
  • [x] Sorting (排序)
  • [x] Filter (筛选)
  • [x] Rowspan and colspan (合并行或列)
  • [x] Import (导入)
  • [x] Export (导出)
  • [x] Print (打印)
  • [x] Show/Hide column (显示/隐藏列)
  • [x] Loading (加载中)
  • [x] Formatted cell (格式化内容)
  • [x] Slot/template (自定义插槽/模板)
  • [x] Context menu(快捷菜单)
  • [x] Expandable row (展开行)
  • [x] Pager(分页)
  • [x] Form(表单)
  • [x] Toolbar(工具栏)
  • [x] List(虚拟列表)
  • [x] Editable CRUD(增删改查)
  • [x] Tree table(树表格)
  • [x] Validate(数据校验)
  • [x] Data Proxy(数据代理)
  • [x] Keyboard navigation(键盘导航)
  • [x] Modal(模态窗口)
  • [x] Renderer(渲染器)
  • [x] Virtual Scroller(虚拟滚动)

Modules

Docs

To view the user guide 使用指南

To view the example 查看演示
To view the document 查看文档

Installing

依赖库:vue 2.6+, xe-utils 2.4+

npm install xe-utils vxe-table

Get on unpkg and cdnjs

npm

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>
<!-- 建议使用 CDN 方式引入的用户在链接地址上锁定版本,避免受到非兼容性更新的影响 -->

Example

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="Seq" width="80"></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="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { 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>

Donation

If the open source project is very helpful to you, you can buy the author a cup of coffee.
如果这个开源项目对您有帮助,请作者喝杯咖啡吧。(如果有问题需要支持可以留言或者提 Issues

👉 捐赠方式💰

pay

License

MIT License, 2019-present, Xu Liangzhan

Package Sidebar

Install

npm i boom-vxe-table

Weekly Downloads

0

Version

2.9.403

License

MIT

Unpacked Size

6.27 MB

Total Files

459

Last publish

Collaborators

  • llysonylin2012