美文网首页
无限层叠表格

无限层叠表格

作者: AlexProgramer | 来源:发表于2018-06-22 10:16 被阅读31次
地址:

npm上的地址:https://www.npmjs.com/package/vue-table-with-tree-grid
github地址:https://github.com/MisterTaki/vue-table-with-tree-grid

使用时建议把他的官方demo拿过来跑跑,附上这个demo的代码:https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue

难点一:自定义单元格的内容;

数据状态,在后台基本都是用简单的数字表示;在表格里渲染时,肯定不能这么展示;这时就需要自定义了;作用域插槽,了解一下。(不了解也行,跟着来就ojbk)


QQ截图20180622100638.png

这个地方,后台传了一个图标的类名给我;我需要放到i标签上去渲染;就可以加入这样的一个作用域插槽;属性slot-scope的属性值scope,就是当前行的数据对象;可以通过scope.row拿到这一行的任意一个数据;最后在columns里面配置的时候。需要这样写


QQ截图20180622100957.png

难点二:自定义表头以及该表头对应列的内容;

看这个插槽


QQ截图20180622101255.png

这三个i标签,分表是修改、删除和添加按钮;因为每一行数据都有一个唯一的id,所以可以通过利用这个id,让slot绑定一个id,给每一行加入自定义的内容。只要每一行都有一个唯一的字段;都可以这样利用起来;并不需要去实际使用;


QQ截图20180622101602.png

相关文章

网友评论

      本文标题:无限层叠表格

      本文链接:https://www.haomeiwen.com/subject/pbzseftx.html