kr-table

简介

一个基于 vue 的 PC 端表格组件，该组件由 ElementUI Table 组件拓展而成，支持表格列配置、数据编辑、数据校验、导出、表单渲染、数据分页、自定义模板、渲染器、灵活的配置项、扩展接口等...

• 设计理念
  • 面向现代浏览器，高效的简洁 API 设计
  • 模块化表格、扩展接口
  • 为单行编辑表格而设计，支持行内编辑验证及更多扩展

功能点

• [x] 基础表格
• [x] 斑马线条纹
• [x] 多种边框
• [x] 单元格样式
• [x] 列宽拖动
• [x] 固定列
• [x] 高亮行
• [x] 序号
• [x] 复选框
• [x] 动态操作菜单
• [x] 排序
• [x] 导出
• [x] 加载中
• [x] 格式化内容
• [x] 自定义插槽
• [x] 分页
• [x] 单元格数据编辑
• [x] 单元格数据校验
• [x] 渲染器
• [ ] 虚拟滚动
• [ ] 打印

安装

版本：vue 2.x

npm install kr-table

npm

import Vue from 'vue'
import KrTable from 'kr-table'
import 'kr-table/lib/kr-table.css'

Vue.use(KrTable)

CDN（暂无）

示例

<template>
  <div>
    <kr-table :columns="columns" :data="items"></kr-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        columns: [
          { title: '编号', key: 'id' },
          { title: '姓名', key: 'name' },
          { title: '角色', key: 'role' },
          { title: '性别', key: 'sex' },
          { title: '地址', key: 'address' },
        ],
        data: [
          { id: '100001', name: 'Test1', role: 'Develop', sex: '男', address: '北京' },
          { id: '100002', name: 'Test2', role: 'Develop', sex: '女', address: '成都' },
          { id: '100003', name: 'Test3', role: 'Develop', sex: '女', address: '上海' },
          { id: '100004', name: 'Test4', role: 'Develop', sex: '男', address: '深圳' },
        ],
      }
    },
  }
</script>

组件文档

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | --------------------------------------------------------------- | ----------- | ------ | ----------------------------------------- | | columns | 表头配置 | Array | —— | —— | | data | 表格数据 | Array | —— | —— | | loading | 表格加载 | Boolean | —— | false | | loadingOptions | 表格加载配置 | Object | —— | —— | | loadError | 加载出错 | Boolean | —— | false | | options | ElementUI table 组件属性对象 | Object | —— | —— | | selectionRow | 是否多选 | Object/null | —— | null | | highlightCurrentRow | 是否高亮新显示当前行 | Object/null | —— | null | | indexRow | 是否显示序号列 | Object/null | —— | null | | treeRow | 是否显示树状表格 展开/收起 列 | Object/null | —— | null | | handleRow | 是否显示操作列 | Object/null | —— | null | | headerSet | 是否可设置列展示 | Boolean | —— | true | | shoWFooter | 是否底部信息 | Boolean | —— | false | | pagination | 分页信息 | Object | —— | "{ pageNum: 1,pageSize: 24,total: 0,}" | | pageLayout | 组件布局，子组件名用逗号分隔 | String | —— | "total, sizes, prev, pager, next, jumper" | | colConfigId | 表格列配置本地存储 key(唯一值) | String | —— | —— | | localSortable | 是否本地排序 | Boolean | —— | false | | disableAllSelect | 是否隐藏全选 | Boolean | —— | false | | isLocalPaging | 是否使用本地分页（注：不支持树状表格） | Boolean | —— | false | | isExport | 是否使用导出功能 | Boolean | —— | false | | exportAll | 是否导出所有数据，true:导出当前页所有数据，false:导出勾选的数据 | Boolean | —— | true | | exportName | 导出文件名称 | String | —— | —— |

Events

包含 ElementUI Table 组件，新增以下事件：

| 事件名 | 说明 | 参数 | | -------------- | -------------------------------------------------- | ------------------------------------------- | | refresh-method | 当加载错误，点击重新加载触发事件 | —— | | on-row-open | 树状表格 展开 当前数据子数据（treeRow 设置时有效） | {row, index, callback:Function(data:Array)} | | on-row-open | 树状表格 收起 当前数据子数据（treeRow 设置时有效） | {row, index, callback:Function(data:Array)} |

Methods

包含 ElementUI Table 组件方法，新增以下方法：

| 方法名 | 说明 | 参数 | | ------------------- | ------------------ | ---- | | hidePanel | 隐藏操作面板 | —— | | setFirstRowSelected | 高亮选中第一条数据 | —— |

Slot

| name | 说明 | | ----------- | ------------------------------------------------------------------ | | appendRow | 表格数据末尾附加一行内容 | | empty | 当数据条数为空时，表格插入至表格中的内容 | | footer | 插入表格底部的内容，默认展示分页组件，当 shoWFooter 为 true 时有效 | | footerLeft | 插入表格底部分页组件左侧的内容，当 shoWFooter 为 true 时有效 | | footerRight | 插入表格底部分页组件右侧侧的内容，当 shoWFooter 为 true 时有效 |