Score
0
Watch 88 Star 403 Fork 71

GVP大猩猩X / vxe-tableJavaScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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 表格组件,与任意组件库兼容

  • 设计理念

    • 面向现代浏览器(简洁、高效的 API 设计)
    • 模块化表格、插件化扩展(功能模块解耦,支持按需加载)
    • 强大的功能的同时兼具性能(支持横向、纵向虚拟滚动、灵活的配置项、不污染全局样式及变量)
  • 计划

    • v1 100% 实现表格的一切实用的功能
    • v2  95% 性能优化,同时兼具功能与性能
    • v3   0% 实现重构,渲染性能大幅提升,基于 Vue3 并使用 typescript 开发

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

Browser Support

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

Features

  • Basic table (基础功能)
  • Dynamic Grid (配置式表格)
  • Size (尺寸)
  • Striped (斑马线条纹)
  • Table with border (带边框)
  • Cell style (单元格样式)
  • Column resizable (列宽拖动)
  • Maximum table height (最大高度)
  • Resize height and width (响应式宽高)
  • Table with fixed header (固定表头)
  • Table with fixed column (固定列)
  • Table with fixed columns and header (固定表头和列)
  • Grouping table head (表头分组)
  • Table sequence (序号)
  • Highlight row and column (高亮行、列)
  • 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(键盘导航)

Modules

Docs

To view the user guide 使用指南

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

Installing

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

npm install 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 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

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 :data="tableData">
      <vxe-table-column type="index" title="序号" width="80"></vxe-table-column>
      <vxe-table-column field="name" title="名字"></vxe-table-column>
      <vxe-table-column field="sex" title="性别"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 10001,
          name: '名字1',
          role: '角色',
          sex: '',
          address: '深圳市 圳市 市 xxx'
        }
      ]
    }
  }
}
</script>

Donation

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

pay

License

MIT License, 2019-present, Xu Liangzhan

Comments ( 25 )

Sign in for post a comment

JavaScript
1
https://gitee.com/xuliangzhan_admin/vxe-table.git
git@gitee.com:xuliangzhan_admin/vxe-table.git
xuliangzhan_admin
vxe-table
vxe-table
master

Help Search