无限层叠表格

地址：

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