2.0.0 • Published 5 years ago
maia-big-table v2.0.0
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
列属性,要求是一个数组
- text: 显示在表头的文字
- value: 对应data的key。treeTable将显示相应的value
- 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 | 否 |