基于elment-ui 实现 tree-grid(表格树)组件

原创 tianxiaofeng747 随笔 技术 134阅读 2018-01-18 09:32:43 举报

由于项目中要用到,然而element ui 又没有类似的组件, 所以只能自己想办法来实现表格树组件。

基于elment-ui实现tree-grid(表格树)组件
原理:
结合 el-tree 和el-col , el-table , ele-button 实现的。 利用 el-tree 的 render-content方法, 表格的head 和 body 列用 el-col 模拟,:span 最大不超过 24 .最后一列一般都是操作列,我写死成了 循环el-button ,其实说白了,核心的还是 el-tree 组件在跑。
如何使用?
很简单 一句话,
<MyTableTree :mate="treeConfig"</MyTableTree>
所有的配置都在 自定义的 treeConfig 中

javascript 代码

该组件最主要的方法就是自定义渲染element tree 的 header 方法如下:
javascript 代码

其中渲染了个自定义的组件MyButton 代码超简单,如下:
html 代码

整个文件代码 点击这里
声明:部分代码参考别人的。
另外: 其中包含下拉树组件在优化中,还不太完善。感兴趣的可以去看看。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复