解决:

本来想在网上博客找一找解决方法,奈何百度到的结果都不尽人意,思维逻辑不清,步骤复杂,代码混乱,找了半天也没找到一个满意的,所以干脆就自己动手写一个

思路:

  1. table需要的数据是array,所以树结构数据要转化为array,所以需要2个局部变量,dataTree(原始数据)以及dataTable(封装数据)
  2. 把dataTree的数据封装到dataTable
  3. 点开某一层(row)的时候,把dataTree这一层数据的子集放在dataTable row下标后(就是数组组合数组)
  4. 通过div的class名称使用不同的css,展示层级关系效果
  5. 关闭某一层(row)的时候,把dataTree这一层数据的子集对比dataTable中数据,然后删除掉

效果:

可能样式还不是很好看,这是我个人能力的问题,写不出来好看的页面,有好的建议或者好看的demo可以联系博主(tangzedong.programmer@gmail)

代码:

<!-- 菜单树 -->
<template>
<div class="menus-tree">
<el-table ref="menusTable" :row-style="showRow" :data="menusTable" v-bind="$attrs">
<el-table-column
prop="title"
label="菜单名称">
<template slot-scope="scope">
<span :class="['level'+scope.row.level]">
<i v-if="scope.row.children" @click="openToggle(scope.row)"
:class="[scope.row.open?'fa fa-chevron-down':'fa fa-chevron-right']"></i>
</span>
{{scope.row.title}}
</template>
</el-table-column>
<el-table-column
prop="icon"
label="图标">
<template slot-scope="scope">
<i :class="scope.row.icon"></i>
</template>
</el-table-column>
<el-table-column
prop="index"
label="路径">
</el-table-column>
<el-table-column
prop="operation"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">增加</el-button>
<!-- 判断下面是否有子菜单,有子菜单不能是有删除按钮 -->
<el-button v-if="!scope.row.children" type="text" size="small">删除</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template> <script>
import Vue from 'vue'; export default {
data() {
return {
// 菜单树结构数据
menusTree: [{
id: '1', // 主键PK
level: '1', // 菜单等级
parentId: '', // 父id
icon: 'fa fa-book fa-2', // 菜单图标
title: '博客管理', //菜单标题
children: [{
id: '4',
level: '2',
parentId: '1',
title: '博客发布',
index: 'blog/edit',
}, {
id: '5',
title: '博客列表',
index: '1-2',
level: '2',
children: [{
id: '9',
level: '3',
parentId: '5',
title: '三次菜单',
index: 'blog/edit',
}]
}, {
id: '6',
level: '2',
title: '博客编辑',
index: '1-3',
}]
}, {
id: '2',
level: '1',
icon: 'fa fa-address-book fa-2',
title: '用户信息',
}, {
id: '3',
level: '1',
icon: 'fa fa-list-ul fa-2',
title: "系统管理",
children: [{
id: '7',
level: '2',
title: '菜单管理',
index: 'system/menu'
}]
}],
defaultProps: {
children: 'children',
label: 'title'
},
// 菜单表格结构数据
menusTable: []
}
},
// 初始化函数,赋值,menusTree =>menusTable
created() {
this.menusTable = this.menusTree;
},
methods: {
showRow: function (row) {
const show = row.row.parent
? row.row.parent._expanded && row.row.parent._show
: true;
row.row._show = show;
return show
? "animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;"
: "display:none;";
}, // 树节点开关操作
openToggle: function (item) {
// 这里只是展开和关闭样式的变换方法
Vue.set(item, 'open', !item.open);
// 展开的时候,显示子节点,关闭的时候隐藏子节点
// 遍历所有的子节点,加入到menuTable中
for (let j = 0; j < this.menusTable.length; j++) {
// 找到父节点的id,然后依次把子节点放到数组里面父节点后面
if (this.menusTable[j].id !== item.id) {
continue;
}
if (item.open) { // open => close
console.log(item.children);
let menusTable = this.menusTable;
item.children.forEach(function (child, index) {
menusTable.splice(j + index + 1, 0, child); // 添加子节点
})
} else {
this.menusTable.splice(j + 1, item.children.length); // 删除子节点
}
break;
}
}
}
}
</script> <style scoped>
.level1, .level2, .level3 {
display: inline-block;
width: 20px;
} .level1 {
margin-left: 5px;
} .level2 {
margin-left: 20px;
} .level3 {
margin-left: 35px;
}
</style>

其他:

现在楼主也处于学习探讨阶段,有不好得地方大家可以指正,这里也只是简单的树表格的展开关闭功能,其他功能也会持续完善

githb地址:https://github.com/dawn-tangzedong/web-manage/tree/master

有意见或建议或问题都可以直接在下方评论

vue 2.0 + ElementUI构建树形表格的更多相关文章

  1. ELement-UI之树形表格(treeTable&&treeGrid)

    先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...

  2. vue.js2.0+elementui ——> 后台管理系统

    前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...

  3. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  4. vue-cli+vue 2.0+element-ui+vue-router+echarts.js开发后台管理系统项目教程

    一.首先使用npm创建vue项目框架: 1.安装vue-cli:    $ npm install --global vue-cli 2.初始化项目:$ npm init webpack  项目名 3 ...

  5. vue 2.0 + elementUI 实现面包屑导航栏

    Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...

  6. Vue实例:vue2.0+ElementUI框架开发pc项目

    开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...

  7. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  8. Vue+abp树形表格

    项目中需要用到树形表格,其他同学找了一个ZkTable,我也就跟着用了,不太好用,有更好的记得联系我.先说下缺点,如果这些不能满足你,后面也没必要看了. 缺点如下(也可能我不会用,如果你会一定记得告诉 ...

  9. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

随机推荐

  1. javascript小实例,拖拽应用(一)

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  2. 通过拼接SQL字符串实现多条件查询

    一.通过拼接SQL字符串的方法的好处是: 1.方便查询条件的扩展. 2.简化业务逻辑的判断. 二.例子: 1.界面设计 2.点击查询的代码 /// <summary> /// 按条件查询 ...

  3. 【Dojo 1.x】笔记4 文字动画效果

    这个笔记,仅仅演示dojo/fx模块的slideTo()方法的简单使用. 有关该模块的用法,见API:有关Dojo的动画.效果,见页面 效果  和  动画 1. 页面组织 html部分同笔记3,js部 ...

  4. SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

    前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中.NPM,作为管理Node.js库最有力的手段,解决了很多Nod ...

  5. Android为TV端助力 MediaPlayer 错误代码(error code)总结 转载

    public static final int MEDIA_ERROR_IO Added in API level 17 File or network related operation error ...

  6. js判断时间是否超过了16:30

    // 判断时间是否超过了16:30 // true: 已超时 // false: 未超时 function timeCompare() { var now = new Date(); var nowT ...

  7. Linux中DHCP服务器的简单配置

    我安装了两台linux系统,一个作为服务器,一个客户端 两个都有3个网卡, 后两个网卡聚合为zhi一个网卡:Linux 网卡聚合 两台电脑都一样. 那么如何为这个聚合网卡进行DHCP的分配呢? 1.由 ...

  8. Oracle获取表字段名,字段类型,字段长度,注释

    SELECT b.comments as 注释, a.column_name as 列名, a.data_type || '(' || a.data_length || ')' as 数据类型, a. ...

  9. 【Eclipse】springMVC介绍与配置

    SpringMCV介绍: Spring MVC是一种基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动的,也就是使用 ...

  10. 【记录】Xmind8 Pro 激活

    摘要 XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生.作为一款有效提升工作和生活效率的生产力工具,受到全球百千万用户的青睐. [有能力请支持正版]     在xmin下载xmi ...