dataTranslate.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.children && record.children.length > 0) {
      let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll)
      tmp = tmp.concat(children)
    }
  })
  
  return tmp
}

export default DataTransfer
 

Tabletree.vue 

<template>
  <div class="table-box">
    <p v-if="fixedHead" class="header-box">{{fixedHead}}</p>
    <el-table :data="data" border fit height="calc(100% - 40px)" style="width: 100%" :row-style="showTr" tooltip-effect="dark" class="tree-table">
      <el-table-column type="selection" width="40">
      </el-table-column>
      <el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" :min-width="firstWidth(index)" show-overflow-tooltip :align="firstAlign(index)">
        <template slot-scope="scope">
          <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space" :key="levelIndex"></span>
          <span class="button" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
                <i v-if="!scope.row._expanded" class="el-icon-remove" aria-hidden="true"></i>
                <i v-if="scope.row._expanded" class="el-icon-circle-plus" aria-hidden="true"></i>
              </span>
          <span v-else-if="index===0" class="ms-tree-space"></span>
          {{scope.row[column.dataIndex]}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" v-if="treeType === 'normal'">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">編輯</el-button>
          <el-button type="primary" size="mini" @click="showHandleAdd(scope.row)">新增子類</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import MSDataTransfer from './dataTranslate.js'
export default {
  name: 'tree-grid',
  props: {
    treeStructure: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    treeType: {
      type: String,
      default: 'normal'
    },
    defaultExpandAll: {
      type: Boolean,
      default: true

    },
    fixedHead: {
      type: String,
      default: ''
    },
    fixed: {
      type: Boolean,
      default: true
    },

    btnList: {
      type: Array,
      default: () => ([])
    },
    operatWidth: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {}
  },
  computed: {
    data() {
      if (this.treeStructure) {
        let data = MSDataTransfer.treeToArray(this.dataSource, null, null, this.defaultExpandAll)
        return data
      }
      return this.dataSource
    }
  },
  methods: {
    showEditDialog(row) {
      console.log(row)
      alert("自己互動")
    },
    showHandleAdd(row) {

      alert("自己互動")
        console.log(row)
    },
    // -----------------------
    showTr(rows, index) {
      let row = rows.row
      let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
      row._show = show
      return show ? '' : 'display:none;'
    },
    toggle(trIndex) {
      let record = this.data[trIndex]
      record._expanded = !record._expanded
    },
    spaceIconShow(index) {
      if (this.treeStructure && index === 0) {
        return true
      }
      return false
    },
    toggleIconShow(index, record) {
      if (this.treeStructure && index === 0 && record.children && record.children.length > 0) {
        return true
      }
      return false
    },
    firstWidth(index) {
      if (index === 0) {
        return '150'
      } else {
        return '100'
      }
    },
    firstAlign(index) {
      if (index === 0) {
        return 'left'
      } else {
        return 'center'
      }
    }
  }
}

</script>
<style scoped>
.table-box {
  width: 100%;
  height: 100%;
}

.header-box {
  padding: 8px 0;
  margin: 0;
  text-align: center;
  font-weight: bold;
}

.ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 18px;
  height: 14px;
}

.ms-tree-space::before {
  content: ""
}

table td {
  line-height: 26px;
}

.button {
  font-size: 20px;
  cursor: pointer;
}

.firstWidth {
  min-width: 150px;
}
.tree-table .el-table__body-wrapper {
  overflow-y: auto;
}

.el-icon-circle-plus,
.el-icon-remove {
  color: #409EFF;
}
</style>

 

 所需要用到的頁面

<template>
  <div>
    <table-tree :columns="columns" :tree-structure="true" :data-source="menuData" ></table-tree>
  </div>
</template>
<script>
import tableTree from './tableTree'
export default {
  data() {
    return {
      columns: [{
          text: '名稱',
          dataIndex: 'event'
        },
        {
          text: '編號',
          dataIndex: 'id'
        },
        {
          text: '條形碼',
          dataIndex: 'timeLine'
        },
        {
          text: '是否需要價格',
          dataIndex: 'comment'
        },
        {
          text: '排序',
          dataIndex: 'num1'
        }
      ],
      menuData: [
        {
          id: 0,
          event: "事件1",
          timeLine: 50,
          comment: "否",
          num1:60
        },
        {
          id: 1,
          event: "事件1",
          timeLine: 100,
          comment: "否",
           num1:60,
          children: [
            {
              id: 2,
              event: "事件2",
              timeLine: 10,
              comment: "否",
               num1:60
            },
            {
              id: 3,
              event: "事件3",
              timeLine: 90,
              comment: "否",
                num1:60,
              children: [
                {
                  id: 4,
                  event: "事件4",
                  timeLine: 5,
                  comment: "否",
                    num1:60
                },
                {
                  id: 5,
                  event: "事件5",
                  timeLine: 10,
                  comment: "否",
                    num1:60
                },
                {
                  id: 6,
                  event: "事件6",
                  timeLine: 75,
                  comment: "否",
                    num1:60,
                  children: [
                    {
                      id: 7,
                      event: "事件7",
                      timeLine: 50,
                      comment: "否",
                        num1:60,
                      children: [
                        {
                          id: 71,
                          event: "事件71",
                          timeLine: 25,
                          comment: "xx",
                            num1:60
                        },
                        {
                          id: 72,
                          event: "事件72",
                          timeLine: 5,
                          comment: "xx",
                            num1:60
                        }
                      ]
                    },
                    {
                      id: 8,
                      event: "事件8",
                      timeLine: 25,
                      comment: "否",
                        num1:60
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
    }
  },
  components: {
    tableTree
  },

}

</script>
<style lang="less" scoped>
</style>