优化table-tree-column

README.md

## renren-fast-vue
- renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案
- 演示地址：[fast.demo.renren.io](//fast.demo.renren.io)
- 演示地址：[fast.demo.renren.io](http://fast.demo.renren.io)
![demo-screenshot](https://github.com/daxiongYang/renren-fast-vue/blob/master/demo-screenshot/1.png)

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

<template>
  <el-table-column :prop="prop" v-bind="$attrs">
    <template slot-scope="scope">
      <span v-if="hasChild(scope.row)" @click.prevent="expandedHandle(scope.$index, scope.row)">
        <span :style="{ 'padding-left': 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="{ 'padding-left': paddingLeft(scope.row) }">
          <i :class="fileIcon" style="padding-right: 7px; padding-left:18px;"></i>
        </span>
        <span>{{scope.row[prop]}}</span>
      <span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
        <i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
        {{ scope.row[prop] }}
      </span>
    </template>
  </el-table-column>
</template>
<script>
  import isArray from 'lodash/isArray'
  export default {
    name: 'table-tree-column',
    data () {
      return { loading: false }
    },
    props: {
      prop: {
        type: String
        type: String,
        default: 'id'
      },
      childNumKey: {
        type: String,
        default: 'child_num'
      },
      parentKey: {
        type: String,
        default: 'parentId'
      },
      levelKey: {
        type: String,
        default: 'depth'
        default: '_level'
      },
      childKey: {
        type: String,
        default: 'children'
      },
      fileIcon: {
        type: String,
        default: 'el-icon-file'
      },
      folderIcon: {
        type: String,
        default: 'el-icon-folder'
      }
    },
    created () {
      console.log(this.$attrs)
    },
    methods: {
      floderIcon (row) {
        return row._expanded ? this.folderIcon + '-open' : this.folderIcon
      childStyles (row) {
        return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px'  return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px' }
      },
      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
        }
      iconClasses (row) {
        return [ !row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom' ]
      },
      paddingLeft (row) {
        return (parseInt(row[this.levelKey]) * 14) + 'px'
      iconStyles (row) {
        return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
      },
      icon (row) {
        return row._expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
      hasChild (row) {
        return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
      },
      expandedHandle (index, row) {
        var data = JSON.parse(JSON.stringify(this.$parent.store.states.data))
        data[index]._expanded = !data[index]._expanded
        console.log(data)
        if (data[index]._expanded) {
          data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
      // 切换处理
      toggleHandle (index, row) {
        if (this.hasChild(row)) {
          var data = JSON.parse(JSON.stringify(this.$parent.store.states.data))
          data[index]._expanded = !data[index]._expanded
          if (data[index]._expanded) {
            data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
          } else {
            data = this.removeChildNode(data, row[this.treeKey])
          }
          this.$parent.store.commit('setData', data)
        } else {
          var id = row[this.treeKey]
          var result = []
          var removeIds = this.descendantsIds(id, data, this.parentKey, this.treeKey)
          data.forEach(item => {
            if (removeIds.indexOf(item[this.treeKey]) === -1) {
              result.push(item)
            }
          this.$nextTick(() => {
            this.$parent.doLayout()
          })
          data = result
          this.$parent.store.commit('setData', data)
        }
      },
      descendantsIds (id, data, parentKey, treeKey) {
        var result = []
        var compare = [id]
        var length = -1
        // if (compare.length !== -1) {
        //   data.forEach(item => {
        //     if (compare.indexOf(item[parentKey]) > -1 && compare.indexOf(item[treeKey]) === -1) {
        //       result.push(item[treeKey])
        //       compare.push(item[treeKey])
        //     }
        //   })
        // }
        while (length !== compare.length) {
          length = compare.length
          console.log(length)
          data.forEach(item => {
            if (compare.indexOf(item[parentKey]) > -1 && compare.indexOf(item[treeKey]) === -1) {
              result.push(item[treeKey])
              compare.push(item[treeKey])
            }
          })
      // 移除子节点
      removeChildNode (data, parentId) {
        var parentIds = isArray(parentId) ? parentId : [parentId]
        if (parentId.length <= 0) {
          return data
        }
        var ids = []
        for (var i = 0; i < data.length; i++) {
          if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
            ids.push(data.splice(i, 1)[0][this.treeKey])
            i--
          }
        }
        return result
        return this.removeChildNode(data, ids)
      }
    }
  }

src/element-ui/index.js

  // TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  // Breadcrumb,
  // BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
// Vue.use(TimePicker)
Vue.use(Popover)
Vue.use(Tooltip)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
// Vue.use(Breadcrumb)
// Vue.use(BreadcrumbItem)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Tabs)

src/utils/index.js

      if (!temp[data[k][pid]]['children']) {
        temp[data[k][pid]]['children'] = []
      }
      if (!temp[data[k][pid]]['_level']) {
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]]['children'].push(data[k])
    } else {
      res.push(data[k])

src/views/config/index.vue

        fixed="right"
        header-align="center"
        align="center"
        width="200"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>

src/views/log/index.vue

        prop="method"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="请求方法">
      </el-table-column>
      <el-table-column
        prop="params"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="请求参数">
      </el-table-column>
      <el-table-column
        prop="ip"
        header-align="center"
        align="center"
        width="150"
        label="IP地址">
      </el-table-column>
      <el-table-column

src/views/menu/index.vue

      <table-tree-column
        prop="name"
        header-align="center"
        align="center"
        treeKey="menuId"
        min-width="120"
        width="150"
        label="名称">
      </table-tree-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        min-width="120"
        width="120"
        label="上级菜单">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="200"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
        this.dataListLoading = true
        API.menu.list().then(({data}) => {
          this.dataList = treeDataTranslate(data, 'menuId')
          console.log(this.dataList)
          this.dataListLoading = false
        })
      },

src/views/oss/index.vue

        fixed="right"
        header-align="center"
        align="center"
        width="200"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>

src/views/role/index.vue

        fixed="right"
        header-align="center"
        align="center"
        width="200"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>

src/views/schedule/index.vue

        fixed="right"
        header-align="center"
        align="center"
        width="200"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:schedule:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.jobId)">修改</el-button>

src/views/user/index.vue

        fixed="right"
        header-align="center"
        align="center"
        width="200"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>