1. 首页加loading

2. tree-column demo

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

@@ -0,0 +1,167 @@
<template>
  <el-table-column :prop="prop" :label="label" :width="width">
    <template slot-scope="scope">
      <span v-if="hasChild(scope.row)" @click.prevent="doexpanded(scope.$index,scope.row)" >
        <span :style="{paddingLeft : paddingLeft(scope.row)}">
          <i :class="icon(scope.row)"></i>
          <i :class="floderIcon(scope.row)" style="padding-right: 7px;"></i>
        </span>
        <span>{{scope.row[prop]}}</span>
      </span>
      <span v-if="!hasChild(scope.row)">
        <span :style="{paddingLeft : paddingLeft(scope.row)}">
          <i :class="fileIcon" style="padding-right: 7px;padding-left:18px"></i>
        </span>
        <span>{{scope.row[prop]}}</span>
      </span>
    </template>
  </el-table-column>
</template>
<script>
  import util from './util'
  export default {
    name: 'el-table-tree-column',
    props: {
      prop: {
        type: String
      },
      label: {
        type: String
      },
      width: {
        type: String
      },
      treeKey: {
        type: String,
        default: 'id'
      },
      childNumKey: {
        type: String,
        default: 'child_num'
      },
      parentKey: {
        type: String,
        default: 'parentId'
      },
      levelKey: {
        type: String,
        default: 'depth'
      },
      childKey: {
        type: String,
        default: 'children'
      },
      fileIcon: {
        type: String,
        default: 'el-icon-file'
      },
      folderIcon: {
        type: String,
        default: 'el-icon-folder'
      },
      remote: {
        type: Function,
        default: null
      }
    },
    computed: {
      owner () {
        let parent = this.$parent
        while (parent && !parent.tableId) {
          parent = parent.$parent
        }
        return parent
      }
    },
    data () {
      return { loading: false }
    },
    methods: {
      floderIcon (row) {
        var expanded = row.$extra && row.$extra.expanded
        return expanded ? this.folderIcon + '-open' : this.folderIcon
      },
      hasChild (row) {
        if (row[this.childNumKey] !== undefined) {
          return row[this.childNumKey] > 0 || false
        } else if (row[this.childKey] !== undefined) {
          return row[this.childKey].length > 0 || false
        } else {
          return false
        }
      },
      paddingLeft (row) {
        return parseInt(row[this.levelKey]) * 14 + 'px'
      },
      icon (row) {
        if (row.$extra && row.$extra.loading === true) 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
        debugger
        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) {
            var hash = util.hash()
            data[index].$extra.expanded = false
            data[index].$extra.hash = hash
            data[index].$extra.loading = true
            vm.owner.store.commit('setData', data)
            this.remote(row, function (result) {
              let list = vm.owner.store.states._data
              let _index = util.index(hash, list)
              list[_index].$extra = {
                loading: false,
                expanded: (result && result.length > 0) || false
              }
              if (result && result.length > 0) {
                var prefix = list.slice(0, _index + 1)
                var i = 0
                while (i < _index + 1) {
                  list.shift()
                  i++
                }
                list = prefix.concat(result).concat(list)
              } else {
                list[_index][vm.childNumKey] = 0
              }
              vm.owner.store.commit('setData', list)
            })
          } else {
            var prefix = data.slice(0, index + 1)
            var i = 0
            while (i < index + 1) {
              data.shift()
              i++
            }
            data = prefix.concat(row[vm.childKey]).concat(data)
            this.owner.store.commit('setData', data)
          }
        } else {
          var id = row[vm.treeKey]
          var result = []
          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)
            }
          })
          data = result
          this.owner.store.commit('setData', data)
        }
      }
    }
  }
</script>

src/components/table-tree-column/util.js

@@ -0,0 +1,44 @@
const indexOf = (val, arr) => {
  var has = -1
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === val) {
      has = i
      break
    }
  }
  return has
}
const descendantsIds = (id, data, parentKey, treeKey) => {
  var result = []
  var compare = [id]
  var length = -1
  while (length !== compare.length) {
    length = compare.length
    data.forEach(function (item) {
      if (indexOf(item[parentKey], compare) > -1 && indexOf(item[treeKey], compare) === -1) {
        result.push(item[treeKey])
        compare.push(item[treeKey])
      }
    })
  }
  return result
}
const hash = () => Math.floor(Math.random() * Math.random() * Math.random() * Math.random() * 1000)
const index = (hash, data) => {
  var i = 0
  while (data[i]) {
    if (data[i].$extra && data[i].$extra.hash === hash) {
      break
    }
    i++
  }
  return i
}
export default {
  indexOf,
  descendantsIds,
  hash,
  index
}

src/views/layout/index.vue

@@ -1,10 +1,15 @@
<template>
  <div class="site-wrapper" :class="siteWarpperClasses">
    <topbar></topbar>
    <sidebar></sidebar>
    <div class="site-content__wrapper" :style="siteContentWarpperStyles">
      <router-view></router-view>
    </div>
  <div class="site-wrapper"
    :class="siteWarpperClasses"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <topbar></topbar>
      <sidebar></sidebar>
      <div class="site-content__wrapper" :style="siteContentWarpperStyles">
        <router-view></router-view>
      </div>
    </template>
  </div>
</template>
@@ -15,6 +20,11 @@
  import API from '@/api'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      return {
        loading: true
      }
    },
    components: {
      Topbar,
      Sidebar,
@@ -50,6 +60,7 @@
      getUserInfo () {
        API.user.info().then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.UPDATE_USER_ID({ id: data.user.userId })
            this.UPDATE_USER_NAME({ name: data.user.username })
          }

src/views/tree-table/data.js

@@ -0,0 +1,138 @@
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

@@ -2,16 +2,114 @@
  <div class="mod-dept">
    <tree-table
      :columns="treeTableColumns"
      :data="datList"
      :data="dataList"
      border
      style="margin-top: 10px;">
      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 API from '@/api'
  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 {
@@ -22,36 +120,27 @@
            width: 200
          }
        ],
        datList: []
        dataList: [],
        treeData: []
      }
    },
    components: {
      TreeTable
      TreeTable,
      TableTreeColumn
    },
    created () {
      this.getDeptList()
      this.treeData = Data
      console.log(this.treeData)
      this.getDataList()
    },
    methods: {
      // 获取部门列表
      getDeptList () {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        API.menu.list().then(({data}) => {
          this.datList = this.dataTranslate(data || [], 'menuId', 'parentId')
          this.dataList = treeDataTranslate(data, 'menuId')
          this.dataListLoading = false
        })
      },
      // 数据转换
      dataTranslate (data, sign, parentSign) {
        for (var i = 0; i < data.length; i++) {
          for (var j = 0; j < data.length; j++) {
            if (data[i][parentSign] === data[j][sign]) {
              data[j]['children'] = data[j]['children'] || []
              data[j]['children'].push(data[i])
              data.splice(i, 1)
              i--
              break
            }
          }
        }
        return data
      }
    }
  }