改为树结构

src/views/warehousing/otherStore/index.vue

@@ -43,20 +43,12 @@
       width="50%">
       <div style="display: flex">
         <div>
-          <el-dropdown @command="handleCommand">
+          <el-tree :data="classifyList"
-            <span class="el-dropdown-link">
+                   :props="defaultProps"
-              物料分类<i class="el-icon-arrow-down el-icon--right"></i>
+                   default-expand-all
-            </span>
+                   @node-click="handleNodeClick"
-            <el-dropdown-menu slot="dropdown">
+                   highlight-current
-              <el-dropdown-item command="110">成品</el-dropdown-item>
+          ></el-tree>
-              <el-dropdown-item command="100">铝合金锭</el-dropdown-item>
-              <el-dropdown-item command="101">锌合金锭</el-dropdown-item>
-              <el-dropdown-item command="111">模具配件</el-dropdown-item>
-              <el-dropdown-item command="102">配件</el-dropdown-item>
-              <el-dropdown-item command="108">辅料</el-dropdown-item>
-              <el-dropdown-item command="101">模具</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
         </div>
         <div style="margin-left: 50px">
           <div class="search-box customer-search">
@@ -197,7 +189,36 @@ export default {
       },
       WarehousingList:[],
       handleSelect:[],
-      chooselist:[]
+      chooselist:[],
+      classifyList:[{
+        label: '物料分类',
+        children: [{
+          label: '成品',
+          id:110
+        },{
+          label: '铝合金锭',
+          id:100
+        },{
+          label: '锌合金锭',
+          id:101
+        },{
+          label: '模具配件',
+          id:111
+        },{
+          label: '配件',
+          id:102
+        },{
+          label: '辅料',
+          id:108
+        },{
+          label: '模具',
+          id:101
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
     };
   },
   mounted() {
@@ -205,6 +226,12 @@ export default {
     this.queryTable()
   },
   methods: {
+    //商品分类点击某个（树）
+    handleNodeClick(data) {
+      this.searchForm.chiff=data.id
+      this.paging.page=1
+      this.queryTable()
+    },
     // 仓库列表
     getBranchList(){
       getBranchList().then((res)=>{