element table 树形结构

tree.js

import Vue from 'vue'
function DataTransfer (data) {
  if (!(this instanceof DataTransfer)) {
    return new DataTransfer(data, null, null)
  }
}

DataTransfer.treeToArray = function (data, parent, level, expandedAll) {
  let tmp = []
  Array.from(data).forEach(function (record) {
    if (record._expanded === undefined) {
      Vue.set(record, '_expanded', expandedAll)
    }
    if (parent) {
      Vue.set(record, '_parent', parent)
    }
    let _level = 0
    if (level !== undefined && level !== null) {
      _level = level + 1
    }
    Vue.set(record, '_level', _level)
    tmp.push(record)
    if (record.menuBeans && record.menuBeans.length > 0) {
      let menuBeans = DataTransfer.treeToArray(record.menuBeans, record, _level, expandedAll)
      tmp = tmp.concat(menuBeans)
    }
  })
  return tmp
}

export default DataTransfer

View Code

index.js

import MSDataTransfer from './tree.js'
export default {
    MSDataTransfer
}

View Code

tableTree.vue

<template>
  <el-table
    :data="data"
    :row-style="showTr">
    <el-table-column v-for="(column, index) of columns" :key="column.dataIndex"
      :label="column.text" align="center">
      <template scope="scope">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) of scope.row._level" class="ms-tree-space" :key="levelIndex"></span>
        <span v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
          <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
        </span>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        {
     {scope.row[column.dataIndex] | btnType}}
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" v-if="treeType === 'normal'">