vue 2.0 + ElementUI构建树形表格

Posted 2021-02-05 hackerblog

解决：

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

思路：

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

效果：

可能样式还不是很好看，这是我个人能力的问题，写不出来好看的页面，有好的建议或者好看的demo可以联系博主（[email protected]）

代码：

<!-- 菜单树 -->
<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

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