Просмотр исходного кода

fix: 将组织结构树从表格改为树形

louhangfei 10 месяцев назад
Родитель
Сommit
1f80c1bc48
1 измененных файлов с 10 добавлено и 7 удалено
  1. 10 7
      src/views/auth/dept/dept.vue

+ 10 - 7
src/views/auth/dept/dept.vue

@@ -8,13 +8,7 @@
         <div class="search"
           ><span class="searchLabel"> 搜索:</span><el-input v-model="searchKey" placeholder="请输入关键字进行搜索" />
         </div>
-        <el-table :data="filterData" row-key="id" :tree-props="treeProps" default-expand-all style="padding: 0 20px">
-          <el-table-column label="组织名称">
-            <template #default="{ row }">
-              {{ `${row.deptName} (${row.userCount})` }}
-            </template>
-          </el-table-column>
-        </el-table>
+        <el-tree :data="filterData" :render-content="renderTree" style="padding: 0 20px" default-expand-all />
       </div>
 
       <CreateDrawer
@@ -72,6 +66,11 @@
     return filterTree({ nodes: tableData.value, value: searchKey.value, key: 'deptName' });
   });
 
+  const renderTree = (h, { node, data }) => {
+    console.log({ node, data });
+    return h('span', { class: 'deptContent' }, `${data.deptName} (${data.userCount})`);
+  };
+
   function reloadTable() {
     loadDataTable();
   }
@@ -114,4 +113,8 @@
       width: 65px;
     }
   }
+
+  .deptContent {
+    font-size: 14px;
+  }
 </style>