Vue中的 tree-table 树形表格插件

这个插件是我在后台管理系统这个项目中用到的一个插件，下面我来为大家详细的说一下这个插件

首先我会在项目中去进行下载这个插件

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

-S是下载到生产环境中

要是要具体下载到哪里了，可以查看项目的package.json的文件，在里面可以查看到下载的插件

在这里插入图片描述

第二步是在main.js中进行引入

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

接下来就是在需要的模块进行编辑就可以了
在这里插入图片描述

<!-- data数据 必须是树形结构 -->
<!-- columns 设置属性 -->
<!-- border边框 -->
<!-- show-row-hover="false" 高亮显示为false -->
<!-- selection-type="false 有>箭头，可以展开 -->
<!-- expand-type="false 有复选框 可以选中 -->
          <tree-table
            class="tb-cate"
            index-text="#"
            show-index
            stripe
            border
            :data="categoriesdata"
            :columns="columns"
            :expand-type="false"
            :selection-type="false"
          >
          <!-- 是否有效 -->
            <template slot="isok" slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.cat_deleted"style="color: red"></i>
              <i class="el-icon-success" v-else style="color: lightGreen"></i>
            </template>
            <!-- 排序 -->
            <template slot="level" scope="scope">
              <el-tag type="primary" effect="plain" size="mini" v-if="scope.row.cat_level == 0">
              一级
              </el-tag>
              <el-tag type="success" effect="plain" size="mini" v-else-if="scope.row.cat_level == 1">
              二级
              </el-tag>
              <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
            </template>
            <!-- 操作 -->
            <template slot="opt" slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="openedit(scope.row)">
              编辑
              </el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="opendel(scope.row)">
              删除
              </el-button>
            </template>
          </tree-table>

这个是写在js里面的数据

 columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],

完成后的页面

Vue中的 tree-table 树形表格插件

悦读