Vue踩坑之路 | 树状表格处理以及‘ For recursiv

项目开发过程中， 新增了一个这样结构的界面：

从iview组件里找了找， 除了表格和树状结构， 也没别的结构标签可用。

但是，这两个组件并不能很好的处理需求，用起来超级麻烦， 对于现阶段的我来说，想糅和到一起使用，enmmm，难度太大。

索性， 去翻了翻iView生态圈， 找到了iView-admin。在里面找到了一个树状表格组件：tree-table-vue

看起来是比较符合我们的需求了， 只需要在结构和数据上修修改改就好， 同时我翻看了文档， 发现api文档中有很多实用字段，具体链接：https://github.com/lison16/tree-table-vue

所以，跟着文档进行组件导入，然后注册引入：

导入项目：npm i tree-table-vue -S

引入项目：import TreeTable from 'tree-table-vue'

使用：Vue.use(TreeTable)

先复制了测试栗子试下（链接：https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue），结果，报错了。。

问题：

<zk-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

很明显的提示， 是否正确注册了<zk-table>组件？ 对于递归组件，请确保提供“名称”选项。

思考了下组件的定义和使用， 在官方文档里， 定义组件要给组件一个名字， 即：

看到这里， 问题的解决就很简单了，修改全局定义：Vue.component('zk-table', TreeTable)

根据文档里的字段， 修改栗子里的数据， 然后运行， 完美：

关键点：

columns的各属性，一定要写对， 且数据值一定要对应：

以上， 小小记录一下。