vue+treeTable 树形表格

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

index.vue

<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: 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: [
                      ]
                    },
                  ]
                }
              ]
            }
          ]
        }
      ],
    }
  },
  components: {
    tableTree
  },

}

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

tableTree.vue