tree-table 树形表格

最新推荐文章于 2025-09-24 12:54:22 发布

原创最新推荐文章于 2025-09-24 12:54:22 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

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

首先先下载

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"></i>
    </template>
	<!-- 排序 -->
	<template slot="sorts" slot-scope="scope">
		<el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
        <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
	</template>
	<!-- 操作 -->
	<template slot="caozuo" slot-scope="scope">
        <el-button type="primary" size="mini">编辑</el-button>
        <el-button type="danger" size="mini">删除</el-button>
	</template>
</tree-table>

// data中的数据
defaultProps: [
    {
      label: "分类名称",
      prop: "cat_name",
    },
    {
      label: "是否有效",
      // 表示当前列为模板列
      type: "template",
      // 表示当前这一列的模板名称
      template: "isok",
    },
    {
      label: "排序",
      type: "template",
      template: "sorts",
    },
    {
      label: "操作",
      type: "template",
      template: "caozuo",
    },
],