实现树形表格

首先了解什么是TreeTable？

treeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单。
优点：
1.兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari
2.接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以
3.组件性能高：内部实现了只绑定了 table 的事件、使用了 css sprite 合并图片等
4.提供两种风格：通过参数来设置风格

在vue脚手架中搜索下载，npm i vue-table-with-tree-grid

在main.js中引入

import TreeTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', TreeTable)

使用

这是结构部分

<tree-table
        class="treeTable"
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        index-text="索引"
        :show-row-hover="false"
        show-index
        border
      > </tree-table>

：data=“其中放的是自己要渲染的数据，也就是接口请求到的（res.data.data）”

:columns=在data的runter{}中定义columns: [
                {
                label: '分类名称',
                prop: 'cat_name'
                },
                {
                label: '是否有效',
                // 当前列 自定义模板
                type: 'template',
                template: 'isOk'
                },
                {
                label: '排序',
                // 当前列 自定义模板
                type: 'template',
                template: 'order'
                },
                {
                label: '操作',
                // 当前列 自定义模板
                type: 'template',
                template: 'opt'
                }
            ],

使用插槽的方法渲染出来数据

 <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="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="categories_xg(scope.row.cat_id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="categories_del(scope.row.cat_id)">删除</el-button>
        </template>

 结束战斗