vue项目使用layui的树形表格treeTable扩展组件

vue项目使用layui的树形表格treeTable扩展组件

首先我的vue项目vue脚手架创建的。

第一步（下载）：

       下载扩展组件treeTable的js，treeTable有3个版本，我个人推荐使用最新版本，即3.0版本。
       前两个版本在github上（https://github.com/whvcse/treetable-lay）面有，进入后点击下方红色圈圈中内容即可下载，里面包含了1.x版本和2.x版本的treeTable。

       3.0版本在gitee上有，下载地址，进入后下载地方类似，我就不发图片了。

       ps:官方提供下载的3.0版本的treeTable.js9kb，而作者本身提供的同样3.0版本的treeTable.js有101kb,至于大小差这么多，我也不清楚，但我使用过官方提供的，明明我数据格式正确，但就是不显示，所以我个人推荐使用作者提供的。
在这里插入图片描述

第二步（引用）：

       网上有很多教如何使用layui树形表格组件treeTable，但项目中如何引用这块，单靠字是很难解决问题的，因为引用的位置每个人都有可能不同，而且网上并未教如何在vue项目中引用，因为vue和layui的某些特性有冲突，但没办法谁让我是小白呢，现在只能在vue项目里使用layui前端框架了，并且layui使用扩展组件是有规范的，[参考链接](https://www.layui.com/doc/base/modules.html) 一个引用不正确，就可能报错，常见的错误就是 layui.js:2 Layui hint: treeTable is not a valid module。
       说了这么多，还没说怎么说怎么在vue项目中怎么引用。我个人使用的是3.0版本，所以只需要引入一个treeTable.js就行的
        1、把你下载的treeTable.js放到你想要放到的位置，但一般脚手架创建的vue项目一般把js文件放到项目的public文件夹，而webpack创建的文件夹一般一般把js文件放到项目的static文件夹，因为我是第一种，所以我把treeTable.js放到了public/layui/js文件夹下。如下图：

       2、网上有很多介绍如何引入layui的，这里我就不说了，在index.heml中引入layui后，在script标签下加入下面这小段代码就可以依照layui官方提供的方法使用treeTable组件了

layui.config({
        base: '/layui/js/'
    }).extend({
        treeTable: 'treeTable'
    })

第三步（使用）：

Test2.vue(在项目src/views文件夹里，我的项目整体布局在最下面有）

<template>
  <div>
    <table id="demo"></table>
  </div>
</template>
<script>
export default {
  name:"Test2",
  data(){
    return{
    }
  },
  mounted() {
    var _this=this;
    layui.use(['treeTable','jquery'],function () {
      var $ = layui.jquery,
          treeTable = layui.treeTable;
      treeTable.render({
        elem: '#demo',
        url: 'json/menus.json',
        /**
        *注意：url: 'json/menus.json'（我为了测试treeTable是否可用
        *使用的是本地的数据，menus.json在我本地项目public/json文件夹下，你可以使用后台传来的数据，格式treeTable作者的开发文档		里有<br>
        *treeTable作者链接：
        *	演示地址：https://whvse.gitee.io/treetable-lay/demo/
		*	开发文档：https://gitee.com/whvse/treetable-lay/wikis/pages
        */
        text: {
          none: '<div style="padding: 18px 0;">哎呀，一条数据都没有~</div>'
        },
        contentType: 'application/json',
        tree: {
          iconIndex: 1,           // 折叠图标显示在第几列
          isPidData: true,        // 是否是id、pid形式数据
          idName: 'authorityId',  // id字段名称
          pidName: 'parentId'     // pid字段名称
        },
        cols: [[
          {type: 'numbers'},
          {field: 'authorityName', title: '菜单名称'},
          {field: 'menuUrl', title: '菜单地址'},
          {field: 'authority', title: '权限标识'}
        ]]
      });
    });

  },
}
</script>