基於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

複製程式碼

<script>
/**
功能描述：許可權管理
建立時間：2018-09-18
建立者：xyw
 */
import comTable from '../common/comTable_new'
import { getTableData, Accessdel, Accessadd, Accessupdate, QueryTableData } from '../../api/system/access'
import commomway from '../../assets/js/commonway'
import Appmixin from '../AppMixin/'
export default {
  name: "sysaccess",
  mixins: [Appmixin],
  data() {
    return {
      ModalLoading: false,
      accessname: '',
      accessmodal: false,
      modaltitle: '',
      action: '',
      loading: false,//表格資料載入狀態
      switchdisabled: false,//是否禁用啟用switch
      formValidate: {
        Id: 0,
        AccessName: "",
        AccessKey: "",
        AccessIcon: "",
        ParentId: 0,
        AccessSort: 0,
        AccessStatus: 1,
        AccessType: 1,
        ParentName: '',
      },
      ruleValidate: {
        AccessSort: [
          { message: '只能是數字', trigger: 'change', pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, }
        ],
        AccessName: [
          { required: true, message: '請輸入許可權名稱', trigger: 'blur' }
        ],
        AccessKey: [
          { required: true, message: '請輸入關鍵字', trigger: 'blur' },
        ]
      },
      menuList: [],
      menuListTreeProps: {
        label: 'AccessName',
        children: 'children'
      },
      defaultCheckedKeys: [],
      defaultExpandedKeys: [],
      accessdata: []
    };
  },
  components: {
    comTable
  },
  created() {
    this.loading = true;
    this.init();
  },
  methods: {
    init() {//頁面載入初始資料
      getTableData().then(re => {
        if (re.data.status == 'ok') {
          let comway = new commomway();
          let { menuData, accessData } = { menuData: JSON.parse(JSON.stringify(re.data.data)), accessData: JSON.parse(JSON.stringify(re.data.data)) };
          this.accessdata = comway.TreeTable(comway.treeDataTranslate(accessData, 'Id', 'ParentId'));
          this.loading = false;
        }
      })
    },
    btnadd(params) {
      this.$refs['formValidate'].resetFields();
      this.formValidate = {
        Id: 0,
        AccessName: "",
        AccessKey: "",
        AccessIcon: "",
        ParentId: params.row.Id,
        AccessSort: 0,
        AccessStatus: 1,
        AccessType: 1,
        ParentName: params.row.AccessName
      }
      this.switchdisabled = false;
      this.accessmodal = true;
      this.action = 'add';
      this.modaltitle = '新增下級許可權資訊';
    },
    btnstop(params) {
      params.row.AccessStatus = params.row.AccessStatus == 1 ? 2 : 1;
      Accessupdate(params.row.Id, params.row).then(re => {
        if (re.data.status == 'ok') {
          this.init();
          this.$Message.success((params.row.AccessStatus == 1 ? '啟用' : '停用') + '成功!');
        } else {
          this.$Message.error((params.row.AccessStatus == 1 ? '啟用' : '停用') + '失敗!');
          console.log(re.data.msg);
        }
      })
    },
    btnupdate(params) {
      this.$refs['formValidate'].resetFields();
      Object.keys(params.row).map(key => {
        this.formValidate[key] = params.row[key];
      })
      this.accessmodal = true;
      this.switchdisabled = false;
      this.action = 'update';
      this.modaltitle = '修改許可權資訊';
    },
    btndel(params) {
      Accessdel(params.row.Id).then(re => {
        if (re.data.status == 'ok') {
          this.init();
          this.$Message.success('刪除成功!');
        } else {
          this.$Message.error('刪除失敗!');
          console.log(re.data.msg);
        }
      })
    },
    menuListTreeCurrentChangeHandle(data, node) {
      this.formValidate.ParentId = data.Id;
      this.formValidate.ParentName = data.AccessName;
    },
  }
};
</script>
複製程式碼

emmm 就是這樣的吧 有啥好的建議闊以提提 嘻嘻