vue-table-with-tree-grid系列之树形表格

---

一、项目地址

地址

这个第三方库只适用于Vue2.0，且已经长时间没更新维护了，请大家在实际项目中谨慎使用。

二、使用步骤

1、安装依赖包

Use npm:

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

Or use yarn:

yarn add vue-table-with-tree-grid

2、基本使用

import Vue from "vue";
import TreeTable from "vue-table-with-tree-grid";
Vue.use(TreeTable);

Or

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

3、实现分类树形列表

• 实现属性列表布局并进行数据填充
• 自定义表格列

<!-- 表格 -->
<tree-table
	:data="categoryList"
	:columns="columns"
	:selection-type="false"
	:expand-type="false"
	:show-index="true"
	index-text="#"
	border
	:show-row-hover="false"
	class="tree-table"
>
	<!-- 是否有效 -->
	<template slot="catDeleted" slot-scope="scope">
		<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
		<i class="el-icon-error" v-else style="color: red"></i>
	</template>
	<!-- 排序 -->
	<template slot="catLevel" slot-scope="scope">
		<el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
		<el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag>
		<el-tag type="warning" v-else size="mini">三级</el-tag>
	</template>
	<!-- 操作 -->
	<template slot="action" slot-scope="scope">
		<el-button type="primary" icon="el-icon-edit" size="mini" @click="updateCategory(scope.row.cat_id)"
			>编辑</el-button
		>
		<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCategory(scope.row.cat_id)"
			>删除</el-button
		>
	</template>
</tree-table>
...
// 为table指定列的定义
columns: [
	{
		label: "分类名称",
		prop: "cat_name"
	},
	{
		label: "是否有效",
		key: "cat_deleted",
		// 表示，将当前列定义为模板列
		type: "template",
		// 表示当前这一列使用的模板名称
		template: "catDeleted"
	},
	{
		label: "排序",
		key: "cat_level",
		// 表示，将当前列定义为模板列
		type: "template",
		// 表示当前这一列使用的模板名称
		template: "catLevel"
	},
	{
		title: "操作",
		// 表示，将当前列定义为模板列
		type: "template",
		// 表示当前这一列使用的模板名称
		template: "action"
	}
],

4、API

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！