maia-big-table

此插件基于element-ui，使用其el-table组件，使用前请确保安装。流畅渲染万级数据并不会影响到el-table的原有功能。

Install

npm install maia-big-table -S

Quick Start

// main.js
import 'maia-big-table/lib/maia-big-table.css'
import 'maia-big-table'

基础用法

<tree-table :data="tableData" :height='600' :rowHeight='48' :leave='7' :columns="columns">
</tree-table>

prop说明

data

必填

原始数据,要求是一个数组

  [{
    key1: value1,
    key2: value2,
    children: [{
      key1: value1
    },
    {
      key1: value1
    }]
  },
  {
    key1: value1
  }]

columns

列属性,要求是一个数组

1. text: 显示在表头的文字
2. value: 对应data的key。treeTable将显示相应的value
3. width: 每列的宽度，为一个数字(可选)

[
    {
      text: 'ID',
      value: 'id'
    },
    {
      text: '时间线',
      value: 'timestamp'
    },
    {
      text: '作者',
      value: 'author'
    }
]

若为多级表头，数据格式如下：

[
    {
      text: 'ID',
      value: 'id'
    },
    {
      text: '时间线',
      children: [{
        text: '二级目录1',
        value: 'timestamp1'
      },
      {
        text: '二级目录2',
        value: 'timestamp2'
      }]
    },
    {
      text: '作者',
      value: 'author',
      editable: true
    }
]

expandAll

是否默认全部展开，boolean值，默认为false

evalFunc

解析函数，function，非必须

如果不提供，将使用默认的evalFunc

如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考/src/components/TreeTable/eval.js

slot

这是一个自定义列的插槽。

默认情况下，treeTable只有一行行展示数据的功能。但是一般情况下，我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式，这时我们就需要自定义列了。

例：

    <tree-table :data="tableData" :height='600' :rowHeight='48' :leave='7' :columns="columns">
      <el-table-column><el-button>删除</el-button></el-table-column>  //slot插槽内容
    </tree-table>

slot和columns属性可同时存在,columns里面的数据列会在slot自定义列的左边展示

其他

如果有其他的需求，请参考/src/components/TreeTable/index.vue的api自行修改index.vue

API

Props:

属性 | 说明 |  类型 |  默认值 | 是否必须传入 :-------: | ------- | :----: | :----: | :----: data | 表格数据列表(必须传入) | Array / Object | - | 是 row-height | 行高(须设置正确的行高，否则会导致表格计算不正确) | Number | 48 | 否 columns | 表头列表(必须传入，包含value、text、width(可选)) | Array | - | 是 leave | 树形表格最大层级 | Number | 7 | 否 height | 表格高度 | Number | 600 | 否 evalFunc | 数据列表格式化 | Function | 默认的evalFunc | 否 expandAll | 是否默认展开所有层级 | Boolean | false | 否