基于Vue+element-ui 的Table树

前面和大家分享过自己封装的table了
这次和大家分享一个table的树无限级的树自己以前也看过网上写的树都是里面带折叠的那种的但是发现一个问题就是我新增了数据进入就会表格会重新渲染了有点体验不是很好的感觉然后还有就是样子也不太好看我就想起了以前的学习ThinkPHP 里面分享了一个table的树觉得挺不错的我也想搞一个用前端的方式去写一个
一开始想去再去找找 (自己有点懒哈哈哈)

效果大致的样子

这个是我以前看到的样子觉得挺不错的
来自己也实现一下

html部分

<template>
 <div>
      <comTable v-model="accessdata" :loading="loading">
        <el-table-column min-width="200" label="权限名称" align="center">
          <template slot-scope="scope">
            <div style="width:100%;text-align: left;">
              {
     {`${scope.row._type}${scope.row.AccessName}`}}
            div>
          template>
        el-table-column>
        <el-table-column prop="AccessKey" min-width="200" label="关键字" align="center">
        el-table-column>
        <el-table-column prop="AccessIcon" min-width="200" label="图标" align="center">
        el-table-column>
        <el-table-column min-width="200" label="节点类型" align="center">
          <template slot-scope="scope">
            {
     {`${scope.row.AccessType == 1 ? '菜单' : '功能'}`}}
          template>
        el-table-column>
        <el-table-column prop="AccessSort" min-width="200" label="排序" align="center">
        el-table-column>
        <el-table-column prop="Remark" min-width="200" label="备注" align="center">
        el-table-column>
        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template slot-scope="scope">
            <Button type='primary' size='small' :disabled=" scope.row.AccessType == 1 ? (getPower('add') ? false : true) : true" style="margin-right:5px" @click="btnadd(scope)">
              添加下级
            Button>
            <Button type='success' size='small' :disabled="getPower('update') ? false : true" style="margin-right:5px" @click="btnupdate(scope)">
              修改
            Button>
            <Button :type="scope.row.Status == 1 ? 'warning' : 'info'" size='small' :disabled="getPower('update') ? false : true" style="margin-right:5px" @click="btnstop(scope)">
              {
     {scope.row.Status == 1 ? '停用' : '启用'}}
            Button>
            <Poptip confirm title="你确定要删除吗?" @on-ok="btndel(scope)" transfer>
              <Button type='error' size='small' :disabled="getPower('del') ? false : true" style="margin-right:5px">删除Button>
            Poptip>
          template>
        el-table-column>
      comTable>
 div>
template>
复制代码

这个里面的comTable组件就是上次封装的table组件了

主要的数据处理部分

我们返回的数据是有父子关系的

class CommonWay {
  /**
   * description：对数组的分页处理
   * author:
   * date:
   * @param {number} [pageNo=1] 页码
   * @param {number} [pageSize=10] 每页显示条数
   * @param {any} [obj=[]] 待分页的数组
   *  @param {Boolean} [iscreateNewdata=true] 是否创建新的数据
   * @returns 返回新的数组
   * @memberof CommonWay
   */
  pagination(pageNo = 1, pageSize = 10, obj = [], iscreateNewdata = true) {
    var array = [];
    if (iscreateNewdata) {
      array = JSON.parse(JSON.stringify(obj));
    } else {
      array = obj;
    }
    var offset = (pageNo - 1) * pageSize;
    return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
  }

  /**
   * 功能描述：获取树状table
   * 创建时间：2018-09-21
   * 创建者：xyw
   * @param {*} [data=[]] 有父子级关系的数据
   * @param {string} [pid='ParentId']
   * @param {number} [def=0]
   * @returns
   * @memberof CommonWay
   */
  TreeTable(data = [], pid = 'ParentId', def = 0) {
    let Newdata = [];
    data.map((item, index) => {
      if (item[pid] == def) {
        item._type = "";
      } else if (item.children) {
        item._type = this.GetNotbsp(item._level) + "─ ";
      } else {
        if (index == data.length - 1) {
          item._type = this.GetNbsp(item._level) + " └─ ";
        } else {
          item._type = this.GetNotbsp(item._level) + "─ ";
        }
      }
      Newdata.push(item);
      if (item.children) {
        Newdata.push(...this.TreeTable(item.children, pid, def));
      }
    })
    return Newdata;
  }

  /**
   * 功能描述：获取有子节点字符串
   * 创建时间：2018-09-21
   * 创建者：xyw
   * @param {*} _level
   * @returns
   * @memberof CommonWay
   */
  GetNotbsp(_level) {
    let nb = '';
    for (let index = 1; index < _level; index++) {
      if (index == _level - 1) {
        nb += ` ├`
      } else {
        nb += ` │`
      }
    }
    return nb;
  }

  /**
   * 功能描述：获取没有子节点字符串
   * 创建时间：2018-09-21
   * 创建者：xyw
   * @param {*} _level
   * @returns
   * @memberof CommonWay
   */
  GetNbsp(_level) {
    let nb = '';
    for (let index = 1; index < _level - 1; index++) {
      nb += ` │`
    }
    return nb;
  }

  /**
   * 功能描述：把数据处理成父子关系
   * 创建时间：2018-09-21
   * 创建者：xyw
   * @param {*} data 数据
   * @param {string} [id='id'] 主键键值
   * @param {string} [pid='parentId'] 父级键值
   * @returns
   * @memberof CommonWay
   */
  treeDataTranslate(data, id = 'id', pid = 'parentId') {
    var res = []
    var temp = {}
    for (var i = 0; i < data.length; i++) {
      temp[data[i][id]] = data[i]
    }
    for (var k = 0; k < data.length; k++) {
      if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
        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])
      }
    }
    return res
  }
}

export default CommonWay

复制代码

基于Vue+element-ui 的Table树

效果大致的样子

html部分

主要的数据处理部分

你可能感兴趣的:(javascript,ui,前端框架)