树形表格插件 - vue-table-with-tree-grid

一、安装

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

二、main.js 中全局注册

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-index
	index-text="#"
>
	<!-- 是否有效 -->
	<template
		slot="isok"
		slot-scope="scope"
	>
	  <i
		class="el-icon-success"
		v-if="!scope.row.cat_deleted"
		style="color: lightgreen;"
	  ></i>
	  <i
		class="el-icon-error"
		v-else
		style="color: red;"
	  ></i>
	</template>
</tree-table>

// 树形表格属性
columns: [
	{
		label: '分类名称',
		prop: 'cat_name'
	},
	{
		label: '是否有效',
		type: 'template', // 表示，将当前列定义为模板列
		template: 'isok' // 表示当前这一列使用模板名称
	}
]

四、相关文档地址

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

五、效果图