修改

src/components/common/chooseMenu.vue

@@ -2,16 +2,31 @@
   <div class="chooseMenu">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane v-for="(item,index) in dataList" :label="item.PageTypeName" :name="item.PageTypeId+''" :key="index">
-        <div style="height:450px;overflow:scroll"> 
+        <div style="height:450px;overflow:scroll" v-if="item.PageTypeId!=6">
           <template v-for="(subItem,subIndex) in item.SubMenuList">
-              <div :key="subIndex" style="margin-bottom:10px;">
+            <div :key="subIndex" style="margin-bottom:10px;">
                 <el-checkbox v-model="subItem.IsChecked" :key="subIndex" @change="checkMenuChange(subItem)">
                   <span v-if="subItem.SelfPageName">{{subItem.SelfPageName}}</span>
                   <span v-else>{{subItem.PageName}} </span>
                 </el-checkbox>
-              </div>
+            </div>
           </template>
         </div>
+        <div style="height:450px;overflow:scroll" v-else>
+            <el-input
+              placeholder="输入关键字进行过滤"
+              v-model="filterText">
+            </el-input>
+            <el-tree
+                :data="treeData"
+                node-key="PageId"
+                ref="tree"
+                :props="defaultProps"
+                filter
+                :filter-node-method="filterNode"
+                show-checkbox>
+            </el-tree>
+        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -21,10 +36,21 @@
     data() {
       return {
         dataList: [],
-        activeName: "1"
+        activeName: "1",
+        treeData: [],
+        filterText:'',
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
       };
     },
     created() {},
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val.trim());
+      }
+    },
     methods: {
       //复选框选择
       checkMenuChange(subItem) {
@@ -76,14 +102,40 @@
                     subItem.IsChecked = false;
                   })
                 }
+                if (item.PageTypeId == 6) {
+                  this.treeData = this.getTree(item.SubMenuList);
+                }
               });
             }
             this.dataList = dataArray;
+            console.log(this.dataList, 'datalist');
+            console.log(this.treeData, 'treeData');
           } else {
             this.Info(res.data.message);
           }
         })
       },
+
+      //递归改变label children
+      getTree(data) {
+        if (data) {
+          for (var i = 0; i < data.length; i++) {
+            data[i].label = data[i].PageName;
+            if (data[i].SubMenuList && data[i].SubMenuList.length > 0) {
+              data[i].children = data[i].SubMenuList;
+            }
+            data[i].IsChecked=false;
+            this.getTree(data[i].SubMenuList)
+          }
+        }
+        return data;
+      },
+      filterNode(value, data) {
+        console.log(value,'value');
+          console.log(data,'data');
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
     },
     mounted() {
       this.getList();