物料产品管理树优化

src/views/mes/md/product/index.vue

@@ -7,9 +7,12 @@
           <el-input v-model="itemTypeName" placeholder="请输入分类名称" clearable size="small" prefix-icon="el-icon-search"
             style="margin-bottom: 20px" />
         </div>
-        <div class="head-container">
-          <el-tree :data="itemTypeOptions" :props="defaultProps" :expand-on-click-node="false"
-            :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick" />
+        <div class="head-container" style="overflow: auto;">
+          <el-tree :data="itemTypeOptions" :props="defaultProps" :expand-on-click-node="false" class="el-tree-pro" node-key="id"
+            :filter-node-method="filterNode" ref="tree" :default-expanded-keys="defaultExpandedKeys" @node-click="handleNodeClick" >
+            <span slot-scope="{ data }" :title="data.label"
+              >{{ data.label }}</span>
+          </el-tree>
         </div>
       </el-col>
       <!--物料数据-->
@@ -379,6 +382,7 @@ export default {
   data() {
     return {
       activeName: "BaseInfo",
+      defaultExpandedKeys: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -502,6 +506,10 @@ export default {
     getTreeselect() {
       treeselect().then((response) => {
         this.itemTypeOptions = response.data;
+        if(response.data.length > 0) {
+          this.defaultExpandedKeys.push(response.data[0]?.id)
+          console.log('this.defaultExpandedKeys', this.defaultExpandedKeys)
+        }
       });
     },
     // 筛选节点
@@ -773,3 +781,14 @@ export default {
   },
 };
 </script>
+<style scoped>
+.el-tree-pro {
+  height: 700px;
+  padding-right: 5px;
+}
+.el-tree-pro .el-tree-node__content span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
\ No newline at end of file