vue-lazy-table-tree
Getting Started
Installation
npm
# install with npm
npm install vue-lazy-table-tree --save
Import the library
;
Add to other Vue components
components: TableTree // ... data, methods, mounted (), etc.
script
# 直接通过标签引用 具体可以参考demo/tree.html
<script src="./vue-lazy-table-tree.umd.min.js"></script>
<table-tree :data-list="dataList" :name="'displayName'" :expanded="'isExpanded'"
:left='10' :page="15"
title="值" class="table">
<div slot="类型" slot-scope="{item}">{{item.displayType}}</div>
<div slot="值" slot-scope="{item}">{{item.value}}</div>
<div slot="操作" slot-scope="{item,keys}">
<span @click="test(item,keys)">新增</span>
<span @click="test(item,keys)">删除</span>
</div>
</table-tree>
-
data-list
- type:
Array
- required:
true
对应的所以数据,参考demo.html
- type:
-
expanded
- type:
String
- required:
false
是否有默认展开配置字段,该字段内存true的时候 展开下级列表
- type:
-
parentKey
- type:
String
- default:
pid
父节点字段名称
- type:
-
name
- type:
String
- default:
name
展示的名称
- type:
-
left
- type:
Num
- default:
5
默认下级的偏移距离
- type:
-
title
- type:
String
- default:
''
列表标题,Key这一列的表格名称
- type:
Compiles and hot-reloads for development
npm run dev
Compiles and minifies for production
npm run build
Customize configuration
See demo展示.