vue 2.0 + ElementUI构建树形表格
解决:
本来想在网上博客找一找解决方法,奈何百度到的结果都不尽人意,思维逻辑不清,步骤复杂,代码混乱,找了半天也没找到一个满意的,所以干脆就自己动手写一个
思路:
- table需要的数据是array,所以树结构数据要转化为array,所以需要2个局部变量,dataTree(原始数据)以及dataTable(封装数据)
- 把dataTree的数据封装到dataTable
- 点开某一层(row)的时候,把dataTree这一层数据的子集放在dataTable row下标后(就是数组组合数组)
- 通过div的class名称使用不同的css,展示层级关系效果
- 关闭某一层(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构建树形表格的更多相关文章
- ELement-UI之树形表格(treeTable&&treeGrid)
先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
- 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 ...
- vue 2.0 + elementUI 实现面包屑导航栏
Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...
- Vue实例:vue2.0+ElementUI框架开发pc项目
开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
- Vue+abp树形表格
项目中需要用到树形表格,其他同学找了一个ZkTable,我也就跟着用了,不太好用,有更好的记得联系我.先说下缺点,如果这些不能满足你,后面也没必要看了. 缺点如下(也可能我不会用,如果你会一定记得告诉 ...
- vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择
一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...
随机推荐
- C#多线程编程笔记
在开发中经常有遇到因为程序执行的时间过长,而造成程序假死的情况,这是因为我们的程序是同步执行的,当执行到需要长时间的操作时,程序就会等待当前的操作完成,从而造成程序假死.C#的异步与多线程就是为了解决 ...
- markdown文本转换word,pdf
pandoc及下载和安装 pandoc是什么 pandoc是一个软件,是一个能把千奇百怪的文档格式互相转换的神器,是一把文档转换的瑞士军刀(swiss-army knife).不多说,放一张其官网(h ...
- Wcf传递的参数实际不为空,但是接收时显示为空。
问题原因:参数大小写不一致引起,服务端接收参数为空 客户端引用 服务端定义
- vscode 输出乱码
文件-首选项-设置,添加如下配置: "code-runner.runInTerminal": true,
- ceph集群搭建
CEPH 1.组成部分 1.1 monitor admin节点安装ceph-deploy工具 admin节点安装ceph-deploy 添加源信息 rm -f /etc/yum.repos.d/* w ...
- Elasticsearch单机双节点集群部署实战
一.安装第一个ElasticSearch(主节点) 1.创建es用户,启动es不能使用root用户 useradd es passwd es12 root用户进入/home/es目录下 2.获取Ela ...
- 记录 FTPClient 超时处理的相关问题
apache 有个开源库:commons-net,这个开源库中包括了各种基础的网络工具类,我使用了这个开源库中的 FTP 工具. 但碰到一些问题,并不是说是开源库的 bug,可能锅得算在产品头上吧,各 ...
- 前端入门13-JavaScript进阶之原型
声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...
- 小tips:JS之for in、Object.keys()和Object.getOwnPropertyNames()的区别
for..in循环 使用for..in循环时,返回的是所有能够通过对象访问的.可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例.这里需要注意的是使用for-in返回的属性因各个浏览器厂 ...
- Python开发爬虫之理论篇
爬虫简介 爬虫:一段自动抓取互联网信息的程序. 什么意思呢? 互联网是由各种各样的网页组成.每一个网页对应一个URL,而URL的页面上又有很多指向其他页面的URL.这种URL之间相互的指向关系就形成了 ...