kr-table v0.1.0

kr-table

简介

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

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

功能点

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

安装

版本：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

Events

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

Methods

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

Slot