vue-table-with-tree-grid的使用

1. 安裝

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

2. 引用

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

Or
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)
           

3. 使用 

<tree-table 
						:data="tableData" 
						:columns="columns" 
						:selection-type="false" 
						:expand-type="false"
						border 
						:show-row-hover="false" 
						class="treeTable" 
						:tree-type="true"
						>
						<!--是否有效-->
						<template slot="isok" slot-scope="scope">
							<i style="color: lightgreen;" v-if="scope.row.cat_deleted === false"
								class="el-icon-success"></i>
							<i style="color: red;" v-else class="el-icon-error"></i>
						</template>
						<template slot="opt">
							<el-button type="primary" icon="el-icon-edit" size="mini">編輯</el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
						</template>
					</tree-table>
           

[
					{label: '分類文章名稱',	prop: 'cat_name'},
					{label: '分類類型',type: 'template',template: 'catid',prop:'cat_id'},
					{label: '描述',type: 'template',template: 'desc',prop:'cat_desc'	},
					{label: '是否顯示在導航欄',	type: 'template',	template: 'isok',prop:'show_in_nav'},
					{label: '操作',type: 'template',	template: 'opt'}
				],
           

4. 效果