首先了解什么是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)

使用

这是结构部分

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

：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'
                }
            ],

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

 
                       class="el-icon-success"
            style="color: lightgreen"
            v-if="scope.row.cat_deleted === false"
          >
        
        
        
          一级
          二级
          三级
        
        
        
          编辑
          删除
        

 结束战斗

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！