md

src/views/emis/emisRegion/index.vue

@@ -73,9 +73,11 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="emisRegionList" @selection-change="handleSelectionChange"
+    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"
           row-key="id"
           :default-expand-all="isExpandAll"
+          lazy
+          :load="load"
           :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
       <el-table-column type="selection" width="55" align="center" />
@@ -207,6 +209,12 @@ export default {
       isExpandAll: false,
       // 重新渲染表格状态
       refreshTable: true,
+
+      tableDataCopy:[],
+      tableData:[],
+      showTable:false,
+
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -277,11 +285,61 @@ export default {
     getList() {
       this.loading = true;
       listEmisRegion(this.queryParams).then(response => {
-        // console.log(response);
-        this.emisRegionList = this.handleTree(response.rows, "id");
+
+        this.tableDataCopy = this.handleTree(response.rows, "id");
+        this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy)).map(item => { // 展示数据
+          item.hasChildren = item.children && item.children.length > 0
+          item.children = null
+          // 记住层级关系
+          item.idList = [item.id]
+          return item
+        })
+
+
         this.loading = false;
       });
     },
+    load (tree, treeNode, resolve) {
+      // 层级关系备份
+      const idCopy = JSON.parse(JSON.stringify(tree.idList))
+      // 查找下一层数据
+      let resolveArr = this.tableDataCopy
+      let id
+      // eslint-disable-next-line
+      while (id = tree.idList.shift()) {
+        const tarItem = resolveArr.find(item => item.id === id)
+        tarItem.loadedChildren = true
+        resolveArr = tarItem.children
+      }
+      // 处理下一层数据的属性
+      resolveArr = JSON.parse(JSON.stringify(resolveArr))
+      resolveArr.forEach(item => {
+        item.hasChildren = item.children && item.children.length > 0
+        item.children = null
+        // 此处需要深拷贝，以防各个item的idList混乱
+        item.idList = JSON.parse(JSON.stringify(idCopy))
+        item.idList.push(item.id)
+      })
+
+      // 标识已经加载子节点
+      tree.loadedChildren = true
+      // 渲染子节点
+      resolve(resolveArr)
+    },
+    unload () {
+      this.showTable = false
+      // eslint-disable-next-line
+      this.$nextTick(() => this.showTable = true)
+      this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy)).map(item => {
+        // hasChildren 表示需要展示一个箭头图标
+        item.hasChildren = item.children && item.children.length > 0
+        // 只展示一层
+        item.children = null
+        // 记住层级关系
+        item.idList = [item.id]
+        return item
+      })
+    },
     // 取消按钮
     cancel() {
       this.open = false;