vue 2.0 + ElementUI構建樹形表格

解決：

本來想在網上博客找一找解決方法，奈何百度到的結果都不盡人意，思維邏輯不清，步驟復雜，代碼混亂，找了半天也沒找到一個滿意的，所以干脆就自己動手寫一個

思路：

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

有意見或建議或問題都可以直接在下方評論