# maia-big-table

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

## Install
```shell
npm install maia-big-table -S
```

## Quick Start
``` javascript
// main.js
import 'maia-big-table/lib/maia-big-table.css'
import 'maia-big-table'
```


### 基础用法
```html
<tree-table :data="tableData" :height='600' :rowHeight='48' :leave='7' :columns="columns">
</tree-table>
```

## prop说明
#### *data*
  **必填**

  原始数据,要求是一个数组
  ```javascript
    [{
      key1: value1,
      key2: value2,
      children: [{
        key1: value1
      },
      {
        key1: value1
      }]
    },
    {
      key1: value1
    }]
  ```

#### columns
  列属性,要求是一个数组

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


  ```javascript
  [
      {
        text: 'ID',
        value: 'id'
      },
      {
        text: '时间线',
        value: 'timestamp'
      },
      {
        text: '作者',
        value: 'author'
      }
  ]
  ```
若为多级表头，数据格式如下：
  ```javascript
  [
      {
        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*](http://git.longhu.net/maia/maia-big-table/blob/master/src/components/TreeTable/eval.js)

  如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考[*/src/components/TreeTable/eval.js*](http://git.longhu.net/maia/maia-big-table/blob/master/src/components/TreeTable/eval.js)

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

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

例：
```shell
    <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   |   否