Metrics
0
Watch 25 Star 97 Fork 14

大猩猩X / vxe-tableJavaScriptMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
一个完整 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容 spread retract

https://xuliangzhan.github.io/vxe-table/#/table/base/basic

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

vxe-table

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

A complete Vue Table, to meet most of the Table all requirements, and perfect compatibility with any component library.
一个完整 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容

  • vxe-table 的设计理念
    • 精简的 API(简洁、高效、通用)
    • 模块化表格(功能模块解耦,支持按需加载)
    • 更加灵活的自定义配置项,更高的可扩展性(兼容任意组件库,不污染全局样式及变量)
    • 强大的功能的同时兼具性能(支持横向、纵向虚拟滚动)

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

Browser Support

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

Features

  • Basics table (基础)
  • Size (尺寸)
  • Striped (斑马线条纹)
  • Table with border (带边框)
  • Cell style (单元格样式)
  • Column resizable (列宽拖动)
  • Fluid-height table with fixed header (流体高度)
  • Resize height and width (响应式宽高)
  • Table with fixed header (固定表头)
  • Table with fixed column (固定列)
  • Table with fixed columns and header (固定表头和列)
  • Grouping table head (表头分组)
  • Table sequence (序号)
  • Radio (单选)
  • Checkbox (多选)
  • Sorting (排序)
  • Filter (筛选)
  • Rowspan and colspan (合并行或列)
  • Footer summary (表尾合计)
  • Export CSV (导出 CSV)
  • Show/hide columns (显示/隐藏列)
  • Loading (加载中)
  • Format content (格式化内容)
  • Custom column template (自定义模板)
  • Context menu(快捷菜单)
  • Virtual Scroller(虚拟滚动)
  • Expandable row (展开行)
  • Pager(分页)
  • Toolbar(工具栏)
  • Tree table (树形表格)
  • Editable CRUD(增删改查)
  • Editable validate(数据校验)
  • DataProxy(数据代理)
  • Keyboard navigation(全键盘操作)
  • Excel(Excel 表格)

Modules

All modules support loading on demand.(所有的模块都支持按需加载)

  • Tablestyle (核心)
    • Extends (扩展模块)
      • Gridstyle (高级表格)
      • Excelstyle (Excel 表格)
    • Modules (功能模块)
      • Columnstyle (列)
      • Cellstyle (单元格)
      • Headerstyle (表头)
      • Bodystyle (表内容)
      • Footerstyle (表尾)
      • Iconstyle (列与单元格)
      • Filterstyle (筛选)
      • Loadingstyle (加载中)
      • Tooltipstyle (提示信息)
      • Menustyle (快捷菜单)
      • Exportstyle (导出)
      • Resizestyle (响应式)
      • Pagerstyle (分页 )
      • Toolbarstyle (工具栏)
      • Checkboxstyle (复选框)
      • Radio style(单选框)
      • Inputstyle (输入框)
      • Messagestyle (消息提示框)
      • Buttonstyle (按钮)
    • Plugins(插件)

Docs

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

Installing

require: Vue 2.6+

npm install xe-utils vxe-table

Get on unpkg and cdnjs

<!-- 引入样式 -->
<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>
import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable, {
  size: 'small',
  tooltipConfig: {
    zIndex: 3000
  }
})

Import on demand

By using the babel-plugin-import , you can load modules on demand and reduce the size of files. First installation, then update .babelrc file
借助插件 babel-plugin-import 可以实现按需加载模块,减少文件体积。然后在文件 .babelrc 中配置

npm install babel-plugin-import -D
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vxe-table",
        "style": true
      }
    ]
  ]
}

Now you can import modules like
最后这样按需引入模块,就可以减小体积了

import {
  VXETable,
  Table,
  Column,
  Cell,
  Header,
  Body,
  Icon
} from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'

Vue.use(Table)
Vue.use(Column)
Vue.use(Cell)
Vue.use(Header)
Vue.use(Body)
Vue.use(Icon)

// The on-demand mode is not internationalized by default and needs to be imported by itself
// 按需加载的方式默认是不带国际化的,需要自行导入
VXETable.setup({
  i18n: (key, value) => VXETable.t(zhCNLocat, key)
})

Internationalization

npm install vxe-i18n
import Vue from 'vue'
import VueI18n from 'vxe-i18n'
import VXETable from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh_CN'
import enLocat from 'vxe-table/lib/locale/lang/en'

const messages = {
  zh_CN: {
    ...zhCNLocat
  },
  en: {
    ...enLocat
  }
}

const i18n = new VueI18n({
  locale: 'zh_CN',
  messages,
})

Vue.use(VXETable, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')

Example

<template>
  <div>
    <vxe-table ref="xTable" :data.sync="tableData">
      <vxe-table-column type="index" label="Number" width="80"></vxe-table-column>
      <vxe-table-column prop="name" label="Name"></vxe-table-column>
      <vxe-table-column prop="sex" label="Sex"></vxe-table-column>
      <vxe-table-column prop="address" label="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 10001,
          name: 'test1',
          role: 'developer',
          sex: 'Man',
          address: 'address abc123'
        }
      ]
    }
  }
}
</script>

Donation

If the project is very helpful to you, you can buy the author a cup of coffee.
如果这个项目对您有帮助,请作者喝杯咖啡吧。☕

pay

License

Copyright (c) 2019-present, Xu Liangzhan

Comments ( 7 )

You need to Sign in for post a comment

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close