element table 树形表格封装

方法不是原著，多年前的，忘了用的哪位大神的，如有侵权，请大神联系我删除
element8.x版本以前是没有树形表格封装的 所以自己上网搜到方法改了一下，没想到11.多版本新增了树形表格。手动哭泣0.0…算是纪念一下吧

table-tree
<table-tree v-loading="loading" :columns="columns" :tree-structure="true" v-on:child-delect="listenToMyBoy" :data-source="menuData"></table-tree>



//table-tree   封装
<template>
  <div class="fuData">
  <el-table
    :data="data"
    :row-style="showTr">
    <el-table-column v-for="(column, index) of columns" :key="column.dataIndex"
                     :label="column.text" align="left">
      <template slot-scope="scope">
        <div :class="index==0?'appk':''">
        <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>
        <el-tooltip class="item" effect="dark" :disabled="scope.row[column.tooltip]==null||undefined?true:false" :content="scope.row[column.tooltip] | timeData" placement="top">
          <span>{{scope.row[column.dataIndex] | btnType}}</span>
          <!--<span :style="index==0?'width:200px;display: block;':''">{{index}}</span>-->
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :disabled="scope.row[column.tooltip]==null||undefined?true:false" :content="scope.row[column.tooltip] | timeData" placement="top">
          <span>{{scope.row[column.textIndex] | textType}}</span>
        </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" v-if="treeType === 'normal'">
      <template slot-scope="props">
        <el-button type="primary" size="small" v-show="(props.row.children).length==0" plain @click="handleEdit(props.$index, props.row)">修改</el-button>
        <!--<el-button type="danger" size="small" plain @click="handleDelete(props.$index, props.row)">删除</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
  import Utils from '../tree'
  //  import Vue from 'vue'
  export default {
    name: 'tree-grid',
    props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
      treeStructure: {
        type: Boolean,
        default: function () {
          return false
        }
      },
// 这是相应的字段展示
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
// 这是数据源
      dataSource: {
        type: Array,
        default: function () {
          return []
        }
      },
// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
      requestUrl: {
        type: String,
        default: function () {
          return ''
        }
      },
// 这个是是否展示操作列
      treeType: {
        type: String,
        default: function () {
          return 'normal'
        }
      },
// 是否默认展开所有树
      defaultExpandAll: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    data () {
      return {}
    },
    computed: {
      // 格式化数据源
      data: function () {
        let me = this
        if (me.treeStructure) {
          let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
          return data
        }
        return me.dataSource
      }
    },
    filters: {
      btnType (value) {
          return value
      },
      textType(value){
        if(value==undefined){
          return ""
        }else{
          return value*100+'%'
        }
      },
      timeData(value){
        if(typeof value=='string'){
          if((value.search("00.00.00") != -1)==true){
            var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(value)
            return newDate[0]
          }else{
            return value
          }
        }else{
          return value
        }
      }
    },
    methods: {
      // 显示行
      showTr(row, index) {
        let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true)
        row.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
      },
      //编辑
      handleEdit(index, row){
        this.$emit('child-delect',row);
      },
      //删除
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          let data={
            id:row.id
          }
          this.$http.post('expect/deleteExpect',data)
            .then(res => {
              if(res.data.code==0){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.$emit('child-delect',"删除成功");
              }
            })
            .catch(error => {
              console.log(error)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
<style scoped>
  .appk{
    width: 200px;
  }
  .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;
  }
</style>