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. 效果

​编辑

\

​