无限级分类解决

src/views/modules/knowledge/album/detail.vue

@@ -241,12 +241,18 @@
         </a-form-item>
         <a-form-item prop="name" style="margin-top:10px;" label="知识分类">
           <a-cascader v-model="categoryValue" 
+            :popupStyle="{
+              maxWidth: '40vw',
+              'overflow-x': 'auto'
+            }"
+            :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
             :options="classifyListAdd" 
             :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
             placeholder="请选择"
             @change="onChange"
             @popupVisibleChange="popupVisibleChange"
-            popupClassName="knowledgeCascader">
+            popupClassName="knowledgeCascader"
+            class="scroll-ckunk">
           </a-cascader>
         </a-form-item>
         <a-form-item prop="name" style="margin-top:10px;" label="选择知识">
@@ -403,7 +409,8 @@ export default {
       yelpPageSize:10,
       yelpDataList:[],
       yelpPageTotle:0,
-      scope: 2
+      scope: 2,
+      widthVar: 400
     }
   },
   beforeRouteLeave(to, from, next) {
@@ -446,6 +453,7 @@ export default {
       // 将排序后的结果重新赋值
       //this.albumArr = result.value.list;
     });
+
   },
   created() {
     //this.dataList = this.albumArr[this.albumIndex].dataList
@@ -764,6 +772,18 @@ export default {
         pkId:undefined,
       }
       this.categoryValue=''
+
+      // let innerWidth = window.innerWidth
+
+      // this.widthVar = innerWidth/30
+
+      setInterval(() => {
+        document.querySelectorAll('.ant-cascader-menu-item').forEach(el => {
+          el.onclick = function() {
+            document.querySelector('.ant-cascader-menus').scrollLeft = 2048
+          }
+        })
+      }, 1000)
     },
     //增加知识
     handleOkAdd(){
@@ -1490,4 +1510,15 @@ export default {
   height: 1.2vw;
   margin-left: 0.6vw;
 }
+</style>
+<style scoped>
+/deep/ .ant-cascader-menus {
+  left: 0!important;
+}
+/deep/ .ant-cascader-menu:last-child {
+  margin-right: 0!important;
+}
+/deep/ .ant-modal-wrap {
+  overflow: inherit;
+}
 </style>

src/views/modules/knowledge/warehouse/contentData.vue

@@ -11,6 +11,11 @@
       </div>
       <div class="userEnd">
         <a-cascader
+          :popupStyle="{
+            maxWidth: widthVar + 'px',
+            'overflow-x': 'auto'
+          }"
+          :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
           :options="options"
           :show-search="{ filter }"
           change-on-select
@@ -18,8 +23,7 @@
           placeholder="请选择分类"
           @change="onChange"
           @popupVisibleChange="popupVisibleChange"
-          class="cascaderBox"
-          
+          class="cascaderBox scroll-ckunk"
         />
       </div>
     </div>
@@ -137,7 +141,8 @@ export default {
       ],
       options: [],
       type:null,
-      typeName:["最新知识","最热知识","文档排行","工作成果","经典案例","维基排行"]
+      typeName:["最新知识","最热知识","文档排行","工作成果","经典案例","维基排行"],
+      innerWidth: 400
     }
   },
   created() {
@@ -174,6 +179,24 @@ export default {
       this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId='+this.user.photo
     }
     
+  },
+  mounted() {
+    let innerWidth = window.innerWidth
+
+    // 计算
+    setTimeout(() => {
+      let offsetWidth = document.querySelector('.scroll-ckunk').getBoundingClientRect().left
+      this.widthVar = innerWidth - offsetWidth - 40
+    }, 1000);
+    
+    setInterval(() => {
+      document.querySelectorAll('.ant-cascader-menu-item').forEach(el => {
+        el.onclick = function() {
+          document.querySelector('.ant-cascader-menus').scrollLeft = 2048
+        }
+      })
+    }, 1000)
+   
   },
   methods: {
     //搜索数据
@@ -709,4 +732,12 @@ export default {
   padding-bottom: 1.5625vw;
   background: #fff;
 }
+</style>
+<style scoped>
+/* /deep/ .ant-cascader-menus {
+  left: 0!important;
+} */
+/deep/ .ant-cascader-menu:last-child {
+  margin-right: 0!important;
+}
 </style>

src/views/modules/knowledge/warehouse/knowledgeAddUpdate.vue

@@ -5,7 +5,12 @@
       <a-form-model ref="knowledgeRef" :rules="knowledgeRules" :model="knowledgeForm" layout="inline" >
         <a-form-model-item class="knowledgeAddUpdateLabel oneline" label="所选分类:" prop="categoryId" style="font-size:0.93vw">
           <a-cascader v-model="knowledgeForm.categoryId" 
-            class="addItemBox"
+            :popupStyle="{
+              maxWidth: widthVar + 'px',
+              'overflow-x': 'auto'
+            }"
+            class="addItemBox scroll-ckunk"
+            :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
             :options="classifyList" 
             :load-data="loadData"
             :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
@@ -232,7 +237,8 @@ export default {
         user: { id:null,name:''}
       },
       headers: {},
-      isSubmit:false
+      isSubmit:false,
+      innerWidth: 800
     }
   },
   created() {
@@ -289,6 +295,24 @@ export default {
       this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
     }
   },
+  mounted() {
+    let innerWidth = window.innerWidth
+
+    // 计算
+    setTimeout(() => {
+      let offsetWidth = document.querySelector('.scroll-ckunk').getBoundingClientRect().left
+      this.widthVar = innerWidth - offsetWidth - 40
+    }, 1000);
+    
+    setInterval(() => {
+      document.querySelectorAll('.ant-cascader-menu-item').forEach(el => {
+        el.onclick = function() {
+          document.querySelector('.ant-cascader-menus').scrollLeft = 2048
+        }
+      })
+    }, 1000)
+   
+  },
   methods: {
     //  title修改限制数量
     titlesChange(){
@@ -657,4 +681,12 @@ export default {
 .ant-cascader-picker-label{
   height: 30px;
 }
+</style>
+<style scoped>
+/deep/ .ant-cascader-menus {
+  left: 0!important;
+}
+/deep/ .ant-cascader-menu:last-child {
+  margin-right: 0!important;
+}
 </style>