tree-table 树形表格

最新推荐文章于 2024-09-14 08:24:01 发布

li_shujun

最新推荐文章于 2024-09-14 08:24:01 发布

阅读量1.9k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/li_shujun/article/details/122990944

版权

本文介绍了如何在Vue.js项目中结合Element UI库创建树形表格（Tree Table）。首先，你需要下载并安装Element UI，然后在main.js文件中导入相关组件。接着，通过HTML代码展示树形表格的数据结构和样式。详细步骤和代码实例帮助读者理解实现过程。

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

首先先下载

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

还需在main.js中导入

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

html代码

<!-- data数据 必须是树形结构 -->
<!-- columns 设置属性 -->
<!-- border边框 -->
<!-- show-row-hover="false" 高亮显示为false -->
<!-- selection-type="false 有>箭头，可以展开 -->
<!-- expand-type="false 有复选框 可以选中 -->
<tree-table
	:data="splist"
	:columns="defaultProps"
	:selection-type="false"
	:expand-type="false"
	index-text="索引"
	:show-row-hover="false"
	show-index
	border
>
	<!-- 是否有效 -->
	<template slot="isok" slot-scope="scope">
		<i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false">&l