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
有意见或建议或问题都可以直接在下方评论