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

最新推荐文章于 2024-04-29 04:28:15 发布

兰颜

最新推荐文章于 2024-04-29 04:28:15 发布

阅读量1.1k

点赞数

分类专栏： element-ui+vue2 文章标签： vue-cli3 tablet

本文为博主原创文章，未经博主允许请勿转载。

本文链接：https://blog.csdn.net/qq_39704057/article/details/119820105

版权

element-ui+vue2 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用vue-table-with-tree-grid组件，展示了一个包含编辑和删除操作的树形表格。通过设置数据、列配置以及自定义模板，实现了显示分类文章名称、分类类型、描述、是否显示在导航栏等信息，并提供了是否有效的状态标识和操作列。

摘要由CSDN通过智能技术生成

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'}
				],