Table-tree-column 替换 tree-table

src/assets/scss/_base.scss

@@ -10,7 +10,8 @@ body {
  color: #333;
  background-color: #f0f0f0;
}
*:focus {
*,
:focus {
  outline: 0;
}
a {

src/components/table-tree-column/index.vue

@@ -1,5 +1,5 @@
<template>
  <el-table-column :prop="prop" :label="label" :width="width">
  <el-table-column :prop="prop" v-bind="$attrs">
    <template slot-scope="scope">
      <span v-if="hasChild(scope.row)" @click.prevent="doexpanded(scope.$index,scope.row)" >
        <span :style="{paddingLeft : paddingLeft(scope.row)}">
@@ -17,6 +17,7 @@
    </template>
  </el-table-column>
</template>
<script>
  import util from './util'
  export default {
@@ -25,12 +26,6 @@
      prop: {
        type: String
      },
      label: {
        type: String
      },
      width: {
        type: String
      },
      treeKey: {
        type: String,
        default: 'id'
@@ -76,6 +71,9 @@
    data () {
      return { loading: false }
    },
    created () {
      console.log(this.$attrs)
    },
    methods: {
      floderIcon (row) {
        var expanded = row.$extra && row.$extra.expanded
@@ -91,23 +89,22 @@
        }
      },
      paddingLeft (row) {
        return parseInt(row[this.levelKey]) * 14 + 'px'
        return (parseInt(row[this.levelKey]) * 14) + 'px'
      },
      icon (row) {
        if (row.$extra && row.$extra.loading === true) return 'el-icon-loading'
        if (row.$extra && row.$extra.loading) return 'el-icon-loading'
        return row.$extra && row.$extra.expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
      },
      doexpanded (index, row) {
        var vm = this
        // var data = JSON.parse(JSON.stringify(this.owner.store.states._data))
        var data = this.owner.store.states._data
        var data = JSON.parse(JSON.stringify(this.owner.store.states._data))
        if (data[index].$extra === undefined) {
          data[index].$extra = { expanded: true }
        } else {
          data[index].$extra.expanded = !data[index].$extra.expanded
        }
        if (data[index].$extra.expanded) {
          if (this.remote != null) {
          if (this.remote !== null) {
            var hash = util.hash()
            data[index].$extra.expanded = false
            data[index].$extra.hash = hash
@@ -146,12 +143,7 @@
        } else {
          var id = row[vm.treeKey]
          var result = []
          var removeIds = util.descendantsIds(
            id,
            data,
            this.parentKey,
            this.treeKey
          )
          var removeIds = util.descendantsIds(id, data, this.parentKey, this.treeKey)
          data.forEach(function (item) {
            if (util.indexOf(item[vm.treeKey], removeIds) === -1) {
              result.push(item)

src/components/tree-table/eval.js

@@ -1,29 +0,0 @@
/**
* @Author: jianglei
* @Date:   2017-10-12 12:06:49
*/
'use strict'
import Vue from 'vue'
export default function treeToArray (data, expandedAll, parent = null, level = null) {
  let tmp = []
  Array.from(data).forEach(function (record) {
    if (record._expanded === undefined) {
      Vue.set(record, '_expanded', expandedAll)
    }
    let _level = 1
    if (level !== undefined && level !== null) {
      _level = level + 1
    }
    Vue.set(record, '_level', _level)
    // 如果有父元素
    if (parent) {
      Vue.set(record, 'parent', parent)
    }
    tmp.push(record)
    if (record.children && record.children.length > 0) {
      const children = treeToArray(record.children, expandedAll, record, _level)
      tmp = tmp.concat(children)
    }
  })
  return tmp
}

src/components/tree-table/index.vue

@@ -1,114 +0,0 @@
<template>
  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
    <el-table-column v-if="columns.length===0" width="150">
      <template slot-scope="scope">
        <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
        <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-arrow-right"></i>
          <i v-else class="el-icon-arrow-down"></i>
        </span>
        {{scope.$index}}
      </template>
    </el-table-column>
    <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width" header-align="center">
      <template slot-scope="scope">
        <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
        <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-arrow-right"></i>
          <i v-else class="el-icon-arrow-down"></i>
        </span>
        {{scope.row[column.value]}}
      </template>
    </el-table-column>
    <slot></slot>
  </el-table>
</template>
<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-13:59
*/
import treeToArray from './eval'
export default {
  name: 'treeTable',
  props: {
    data: {
      type: [Array, Object],
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    evalFunc: Function,
    evalArgs: Array,
    expandAll: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 格式化数据源
    formatData: function () {
      let tmp
      if (!Array.isArray(this.data)) {
        tmp = [this.data]
      } else {
        tmp = this.data
      }
      const func = this.evalFunc || treeToArray
      const args = this.evalArgs ? Array.concat([tmp], this.evalArgs) : [tmp, this.expandAll]
      return func.apply(null, args)
    }
  },
  methods: {
    showRow: function (row) {
      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
      row.row._show = show
      return show ? '' : 'display:none;'
    },
    // 切换下级是否展开
    toggleExpanded: function (trIndex) {
      const record = this.formatData[trIndex]
      record._expanded = !record._expanded
    },
    // 图标显示
    iconShow (index, record) {
      return (index === 0 && record.children && record.children.length > 0)
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  $color-blue: #2196F3;
  $space-width: 18px;
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;
    &::before {
      content: ""
    }
  }
  .processContainer{
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }
  .tree-ctrl{
    position: relative;
    cursor: pointer;
    // color: $color-blue;
    margin-left: -$space-width;
  }
</style>

src/components/tree-table/readme.md

@@ -1,89 +0,0 @@
## 写在前面
此组件仅提供一个创建TreeTable的解决思路
## prop说明
#### *data*
  **必填**
  原始数据,要求是一个数组或者对象
  ```javascript
    [{
      key1: value1,
      key2: value2,
      children: [{
        key1: value1
      },
      {
        key1: value1
      }]
    },
    {
      key1: value1
    }]
  ```
  或者
 ```javascript
    {
      key1: value1,
      key2: value2,
      children: [{
        key1: value1
      },
      {
        key1: value1
      }]
    }
  ```
#### columns
  列属性,要求是一个数组
  1. text: 显示在表头的文字
  2. value: 对应data的key。treeTable将显示相应的value
  3. width: 每列的宽度，为一个数字(可选)
  
  如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
  
  如果你有几个字段是需要自定义的，几个不需要，那么可以将不需要自定义的字段放入columns，将需要自定义的内容放入到slot中，详情见后文
  ```javascript
  [{
    value:string,
    text:string,
    width:number
  },{
    value:string,
    text:string,
    width:number
  }]
  ```
#### expandAll
  是否默认全部展开，boolean值，默认为false
#### evalFunc
  解析函数，function，非必须
  如果不提供，将使用默认的[evalFunc](./eval.js)
  如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)
#### evalArgs
  解析函数的参数，是一个数组
  **请注意，自定义的解析函数参数第一个为this.data，你不需要在evalArgs填写。** *this.data为需要解析的数据*
  如你的解析函数需要的参数为`(this.data,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
  
  如果你的解析函数参数只有一个`(this.data)`,那么就可以不用填写evalArgs了
  
  具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
 ## slot
 这是一个自定义列的插槽。
 
 默认情况下，treeTable只有一行行展示数据的功能。但是一般情况下，我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式，这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)，[实例效果](http://panjiachen.github.io/vue-element-admin/#/example/table/custom-tree-table)
 
 `slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
 ## 其他
  如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

src/router/index.js

@@ -12,7 +12,6 @@ Vue.use(Router)
export default new Router({
  mode: 'hash',
  routes: [
    { path: '/tree-table', component: _import('tree-table/index'), name: 'treeTable', desc: '树型表格' },
    { path: '/404', component: _import('error/404'), name: '404', desc: '404未找到' },
    { path: '/login', component: _import('login/index'), name: 'login', desc: '登录' },
    {

src/views/menu/index.vue

@@ -5,17 +5,27 @@
        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <tree-table
      :columns="treeTableColumns"
    <el-table
      :data="dataList"
      border
      style="width: 100%;">
      <el-table-column
        prop="name"
        prop="menuId"
        header-align="center"
        align="center"
        label="菜单名称">
        width="80"
        label="ID">
      </el-table-column>
      <table-tree-column
        prop="name"
        header-align="center"
        align="center"
        file-icon="icon icon-file" 
        folder-icon="icon icon-folder" 
        treeKey="menuId"
        min-width="120"
        label="名称">
      </table-tree-column>
      <el-table-column
        prop="parentName"
        header-align="center"
@@ -74,14 +84,14 @@
          <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
  import TreeTable from '@/components/tree-table'
  import TableTreeColumn from '@/components/table-tree-column'
  import AddOrUpdate from './add-or-update'
  import API from '@/api'
  import { treeDataTranslate } from '@/utils'
@@ -89,20 +99,13 @@
    data () {
      return {
        dataForm: {},
        treeTableColumns: [
          {
            text: 'ID',
            value: 'menuId',
            width: '120'
          }
        ],
        dataList: [],
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    components: {
      TreeTable,
      TableTreeColumn,
      AddOrUpdate
    },
    activated () {

src/views/tree-table/data.js

@@ -1,138 +0,0 @@
export default [{
  'id': 1,
  'label': 'System',
  'parent_id': null,
  'url': null,
  'depth': 0,
  'child_num': 3,
  'description': 'System Manager',
  'children': [{
    'id': 2,
    'label': 'base',
    'parent_id': 1,
    'url': null,
    'depth': 1,
    'child_num': 5,
    'description': 'Base Manager',
    'expanded': true,
    'children': [{
      'id': 3,
      'label': 'Menus',
      'parent_id': 2,
      'url': '/menus',
      'depth': 2,
      'child_num': 0,
      'description': 'menu manager'
    }, {
      'id': 4,
      'label': 'Roles',
      'parent_id': 2,
      'url': '/roles',
      'depth': 2,
      'child_num': 0,
      'description': 'Role Manager'
    }, {
      'id': 5,
      'label': 'Users',
      'parent_id': 2,
      'url': '/users',
      'depth': 2,
      'child_num': 0,
      'description': 'User Manager'
    }]
  }]
}, {
  'id': 6,
  'label': 'Customs',
  'parent_id': null,
  'url': null,
  'depth': 0,
  'child_num': 2,
  'description': 'Custom Manager',
  'children': [{
    'id': 7,
    'label': 'CustomList',
    'parent_id': 6,
    'url': '/customs',
    'depth': 1,
    'child_num': 0,
    'description': 'CustomList'
  }]
}, {
  'id': 8,
  'label': 'Templates',
  'parent_id': null,
  'url': null,
  'depth': 0,
  'child_num': 1,
  'description': 'Template Manager',
  'children': [{
    'id': 9,
    'label': 'TemplateList',
    'parent_id': 8,
    'url': '/doc_templates',
    'depth': 1,
    'child_num': 0,
    'description': 'Template Manager'
  }]
}, {
  'id': 10,
  'label': 'Bussiness',
  'parent_id': null,
  'url': null,
  'depth': 0,
  'child_num': 2,
  'description': 'Bussiness Manager',
  'expanded': true,
  'children': [{
    'id': 11,
    'label': 'BussinessList',
    'parent_id': 10,
    'url': null,
    'depth': 1,
    'child_num': 2,
    'description': 'BussinessList',
    'children': [{
      'id': 12,
      'label': 'Currencies',
      'parent_id': 11,
      'url': '/currencies',
      'depth': 2,
      'child_num': 0,
      'description': 'Currencies'
    }, {
      'id': 13,
      'label': 'Dealtypes',
      'parent_id': 11,
      'url': '/dealtypes',
      'depth': 2,
      'child_num': 0,
      'description': 'Dealtypes'
    }]
  }, {
    'id': 14,
    'label': 'Products',
    'parent_id': 10,
    'url': null,
    'depth': 1,
    'child_num': 2,
    'description': 'Products',
    'children': [{
      'id': 15,
      'label': 'ProductTypes',
      'parent_id': 14,
      'url': '/productTypes',
      'depth': 2,
      'child_num': 0,
      'description': 'ProductTypes'
    }, {
      'id': 16,
      'label': 'ProductList',
      'parent_id': 14,
      'url': '/products',
      'depth': 2,
      'child_num': 0,
      'description': 'ProductList'
    }]
  }]
}]

src/views/tree-table/index.vue

@@ -1,147 +0,0 @@
<template>
  <div class="mod-dept">
    <tree-table
      :columns="treeTableColumns"
      :data="dataList"
      border
      style="width: 100%;">
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="菜单名称">
      </el-table-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        label="上级菜单">
      </el-table-column>
      <el-table-column
        prop="icon"
        header-align="center"
        align="center"
        label="图标">
        <template slot-scope="scope">
          <i :class="['fa-lg', scope.row.icon]"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        header-align="center"
        align="center"
        label="排序号">
      </el-table-column>
      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="菜单URL">
      </el-table-column>
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="授权标识">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
          <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>
    <!-- <el-table :data="treeData" border max-height="250">
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        label="上级菜单">
      </el-table-column>
      <table-tree-column 
        file-icon="icon icon-file" 
        folder-icon="icon icon-folder" 
        prop="value" label="名称" width="220">
      </table-tree-column>
      <el-table-column
        prop="icon"
        header-align="center"
        align="center"
        label="图标">
        <template slot-scope="scope">
          <i :class="['fa-lg', scope.row.icon]"></i>
        </template>
      </el-table-column>
  </el-table> -->
    <el-table :data="dataList" border max-height="400">
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <table-tree-column 
        file-icon="icon icon-file" 
        folder-icon="icon icon-folder" 
        prop="label" label="MenuName" width="320">
      </table-tree-column>
      <el-table-column prop="description" label="Description" :show-overflow-tooltip="true" width="180"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  import TreeTable from '@/components/tree-table'
  import TableTreeColumn from '@/components/table-tree-column/index.vue'
  import Data from './data.js'
  import API from '@/api'
  import { treeDataTranslate } from '@/utils'
  export default {
    data () {
      return {
        treeTableColumns: [
          {
            text: '名称',
            value: 'name',
            width: 200
          }
        ],
        dataList: [],
        treeData: []
      }
    },
    components: {
      TreeTable,
      TableTreeColumn
    },
    created () {
      this.treeData = Data
      console.log(this.treeData)
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        API.menu.list().then(({data}) => {
          this.dataList = treeDataTranslate(data, 'menuId')
          this.dataListLoading = false
        })
      }
    }
  }
</script>