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,至于大小差这么多,我也不清楚,但我使用过官方提供的,明明我数据格式正确,但就是不显示,所以我个人推荐使用作者提供的。
在这里插入图片描述
gitee和官网treeTable.js大小对比

第二步(引用):
       网上有很多教如何使用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>

项目整体布局

Logo

前往低代码交流专区

更多推荐