基于element 树形表格组件

版权声明： https://blog.csdn.net/xuxu_qkz/article/details/82856478

数据格式化方法
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

数型表格组件
treeTable/index.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 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-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]}}
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="operatWidth" :fixed="fixed?'right':fixed" v-if="btnList.length">
          <template slot-scope="scope">
            <el-button :type="btn.type" :size="btn.size" @click="btn.func({data:scope.row,name:btn.name})" v-for="(btn,index) in btnList" :key="index">{{btn.name}}</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>
<script>
import MSDataTransfer from './dataTranslate.js'
//  import Vue from 'vue'
export default {
  name: 'tree-grid',
  props: {
    // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
    treeStructure: {
      type: Boolean,
      default: false
    },
    // 这是相应的字段展示
    columns: {
      type: Array,
      default: () => ([])
    },
    // 这是数据源
    dataSource: {
      type: Array,
      default: () => ([])
    },
    // 这个是是否展示操作列
    treeType: {
      type: String,
      default: 'normal'
    },
    // 是否默认展开所有树
    defaultExpandAll: {
      type: Boolean,
      default: false

    },
    // 固定表头
    fixedHead: {
      type: String,
      default: ''
    },
    // 是否固定操作列
    fixed: {
      type: Boolean,
      default: true // 默认为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: {
    // 显示行
    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 '200'
      } 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;
  }
</style>
<style>
 .tree-table .el-table__body-wrapper{
    overflow-y: auto ;
  }
</style>