如何使用vue-table-with-tree-grid樹形表格組件
1、假如遇到了一個需要搭建一個樹形結構的表格頁面，這時候vue-table-with-tree-grid便可以派上用場。示例如下。
2、如果你是使用vue ui搭建的項目，使用時操作如下;
2.1: 在vue 控制台中點擊依賴->安裝依賴->運行依賴->輸入vue-table-with-tree-gird->點擊安裝
2.2:打開main.js，導入vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid' ..... Vue.config.productionTip = false - 1
- 2
- 3
2.3:全局注冊
//全局注冊組件 Vue.component('tree-table', TreeTable) - 1
- 2
2.4使用組件展示分類數據
<!-- 分類表格 :data(設置數據源) :columns(設置表格中列配置信息) :selection-type(是否有復選框) :expand-type(是否展開數據) show-index(是否設置索引列) index-text(設置索引列頭) border(是否添加縱向邊框) :show-row-hover(是否鼠標懸停高亮) --> <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false"> </tree-table>3、如果你是使用 vue create my-project 搭建項目，使用時操作如下。
3.1：安裝
npm i vue-table-with-tree-grid -S 3.2:打開main.js，導入vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid' ..... Vue.config.productionTip = false
3.3:全局注冊
//全局注冊組件 Vue.component('tree-table', TreeTable)
3.4使用組件展示分類數據
<!-- 分類表格 :data(設置數據源) :columns(設置表格中列配置信息) :selection-type(是否有復選框) :expand-type(是否展開數據) show-index(是否設置索引列) index-text(設置索引列頭) border(是否添加縱向邊框) :show-row-hover(是否鼠標懸停高亮) --> <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false"> </tree-table>
更多方法屬性：https://www.npmjs.com/package/vue-table-with-tree-grid