一、安裝

npm install vue-table-with-tree-grid -S

二、main.js 中全局注冊(cè)

import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table', TreeTable)

三、使用

<tree-table:data="cateList":columns="columns":selection-type="false":expand-type="false":show-row-hover="false"show-indexindex-text="#" ><!-- 是否有效 --><templateslot="isok"slot-scope="scope"><iclass="el-icon-success"v-if="!scope.row.cat_deleted"style="color: lightgreen;"></i><iclass="el-icon-error"v-elsestyle="color: red;"></i></template> </tree-table>// 樹形表格屬性 columns: [{label: '分類名稱',prop: 'cat_name'},{label: '是否有效',type: 'template', // 表示，將當(dāng)前列定義為模板列template: 'isok' // 表示當(dāng)前這一列使用模板名稱} ]

四、相關(guān)文檔地址

1、官方使用詳情地址：https://github.com/MisterTaki/vue-table-with-tree-grid
2、demo使用詳情地址：https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue

五、效果圖

總結(jié)

以上是生活随笔為你收集整理的树形表格插件 - vue-table-with-tree-grid的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。