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

王懿诺

已于 2022-02-22 20:38:28 修改

阅读量817

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue elementui 文章标签： vue.js

于 2022-02-20 21:23:58 首次发布

本文链接：https://blog.youkuaiyun.com/TodayStartWJH/article/details/123036186

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

elementui

7 篇文章

订阅专栏

本文介绍了如何使用vue-table-with-tree-grid组件来创建带有树形结构的表格。通过下载、引入和配置，可以实现复杂的数据展示效果。官方GitHub仓库提供了详细的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、使用
官方地址,https://github.com/MisterTaki/vue-table-with-tree-grid有详细使用示例。

<!-- 表格 -->
<!-- columns 表格各列的配置 -->
<!-- selection-type 表格里的复选框 -->
<!-- expand-type 展开列-->
<!-- show-index 数据索引 -->
<!-- index-text="#" 自定义数据索引标题 -->
<!-- show-row-hover 鼠标悬停时,是否当前行高亮 -->
<tree-table class="treeTable"
 :data="catelist"
 :columns="columns"
 :selection-type="false" 
 :expand-type="false"
  show-index
  index-text="#" 
  border 
 :show-row-hover="false"
>
    <!-- 是否有效 -->
    <template slot="isok" 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="order" slot-scope="scope">
         <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
        <el-tag type="warning" size="mini" v-else>三级</el-tag>
    </template>
    <!-- 操作 -->
    <template slot="opt" slot-scope="scope">
        <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>

// 为table指定列的定义
 columns: [
     {
     label: '分类名称',
     prop: 'cat_name'
     },
     {
     label: '是否有效',
     // 表示，将当前列定义为模板列
     type: 'template',
     // 表示当前这一列使用模板名称
     template: 'isok'
     },
     {
     label: '排序',
     // 表示，将当前列定义为模板列
     type: 'template',
     // 表示当前这一列使用模板名称
     template: 'order'
     },
     {
     label: '操作',
     // 表示，将当前列定义为模板列
     type: 'template',
     // 表示当前这一列使用模板名称
     template: 'opt'
     }
 ],

实现效果
在这里插入图片描述