Vue-soul-ui NPM

s-table

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

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

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

Browser Support


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（全键盘操作）

Modules

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

(核心)
- Extends （扩展模块）
  - （高级表格）
- Modules （功能模块）
  - （列）
  - （单元格）
  - （表头）
  - （表内容）
  - （表尾）
  - （图标）
  - （筛选）
  - （加载中）
  - （提示信息）
  - （快捷菜单）
  - （导出）
  - （响应式）
  - （分页）
  - （工具栏）
  - （复选框）
  - （单选框）
  - （输入框）
  - （消息提示框）
  - （按钮）
- Plugins（插件）
  - （element-ui 适配插件）
  - （iview 适配插件）
  - （ant-design-vue 适配插件）

Docs

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

Installing

require: Vue 2.6+

npm install xe-utils s-table

Get on unpkg and cdnjs

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vue-soul-ui/lib/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/s-table"></script>

import Vue from 'vue'
import STable from 's-table'
import 'vue-soul-ui/lib/index.css'

Vue.use(STable, {
  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": "s-table",
        "style": true
      }
    ]
  ]
}

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

import {
  STable,
  Table,
  Column,
  Cell,
  Header,
  Body,
  Icon
} from 's-table'
import zhCNLocat from 'vue-soul-ui/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
// 按需加载的方式默认是不带国际化的，需要自行导入
STable.setup({
  i18n: (key, value) => STable.t(zhCNLocat, key)
})

Internationalization

npm install s-i18n

import Vue from 'vue'
import VueI18n from 's-i18n'
import STable from 's-table'
import zhCNLocat from 'vue-soul-ui/lib/locale/lang/zh-CN'
import enLocat from 'vue-soul-ui/lib/locale/lang/en'

const messages = {
  zh-CN: {
    ...zhCNLocat
  },
  en: {
    ...enLocat
  }
}

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages,
})

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

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

Example

<template>
  <div>
    <s-table ref="xTable" :data.sync="tableData">
      <s-table-column type="seq" title="Number" width="80"></s-table-column>
      <s-table-column field="name" title="Name"></s-table-column>
      <s-table-column field="sex" title="Sex"></s-table-column>
      <s-table-column field="address" title="Address"></s-table-column>
    </s-table>
  </div>
</template>

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