当前位置： 移动技术网 > IT编程>网页制作>CSS > element-tree-grid（表格树）的使用

element-tree-grid（表格树）的使用

2019年02月22日  | 移动技术网IT编程  | 我要评论

商洛市公安局,巫门鬼医,丛生风铃草

表格树，element-tree-grid需要单独下载并再配合elementui里el-table使用。

步骤：1、npm install element-tree-grid --save（下载element-tree-grid）

　　　2、在main.js里引用：import eltreegrid 'element-tree-grid'

　　　　　　　　　　　　  vue.component(eltreegrid.name,eltreegrid)
　　　3、html代码（配合el-table使用）：
　　　　　　<el-table :data='data'>
　　　　　　　　<el-table-tree-column fixed (是否固定)
　　　　　　　　　　　　　　　　　　prop='属性 '     table='表头'
　　　　　　　　　　　　　　　　　　levelkey='层级（0,1,2,3代表第几层）'
　　　　　　　　　　　　　　　　　　parentkey='parentid（上一层级的id,值与父层级的id（treekey）一致）’
　　　　　　　　　　　　　　　　　　treekey='目前层级的id，子层级的parentkey与其一致 '
　　　　　　　　　　　　　　　　　　:indentsize='没展开一个层级缩进的px'
　　　　　　　　　　　　　　　　　　child-key='子层级数据（数组形式）'>
　　　　　　　　</el-table-tree-column>
　　　　　　　　<el-table-column prop='' lable=''>
　　　　　　　　</el-table-column>
　　　　　　　　<el-table-column prop='' lable=''>
　　　　　　　　</el-table-column>
　　　　　　　　.....
　　　　　　</el-table>
　　　　4、data的结构：
　　　　　　　data:[
　　　　　　　　{
 　　　　　　　　　levelkey:0,
　　　　　　　　　 parentkey:0,
　　　　　　　　　 treekey:1,
　　　　　　　　　 child-key:[
　　　　　　　　　　{
　　　　　　　　　　   levelkey:1,
　　　　　　　　　 　  parentkey:1,
　　　　　　　　　       treekey:2,
　　　　　　　　　　　child-key:[
　　　　　　　　　　　　levelkey:2,
　　　　　　　　　 　      parentkey:2,
　　　　　　　　　           treekey:3,
　　　　　　　　　　　　....
　　　　　　　　　　　]
　　　　　　　　　　}
　　　　　　　　　]
　　　　　　　　},
　　　　　　　　{.....}
　　　　　　　]
el-table 的属性方法都可正常使用

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网