diff --git a/src/views/course/ManageListRemote.vue b/src/views/course/ManageListRemote.vue
index 93e762da..bb2bcfbf 100644
--- a/src/views/course/ManageListRemote.vue
+++ b/src/views/course/ManageListRemote.vue
@@ -92,6 +92,7 @@
@visible-change="handleResOwnerVisibleChange"
filterable
:filter-method="resOwnerFilterMethod"
+ popper-class="my-cascader-popper"
>
@@ -1019,10 +1020,43 @@ export default {
}
});
},
+ handleExpand() {
+ this.$nextTick(() => {
+ // 找到下拉框DOM
+ const popper = document.querySelector('.my-cascader-popper')
+
+ const doms = popper.getElementsByClassName('el-cascader-node__label')
+ Array.from(doms).forEach(label => {
+ // 使用once选项,确保事件只执行一次
+ label.addEventListener('click', (event) => {
+ console.log('click')
+ const menus = popper.querySelectorAll('.el-cascader-menu')
+ if (menus.length > 1) {
+ // 保留第一个菜单,移除后面的
+ for (let i = this.resOwnerSelected.length; i < menus.length; i++) {
+ menus[i].style.display = 'block'
+ }
+ }
+ // 事件执行后自动解除绑定
+ }, { once: true })
+ })
+ if (popper) {
+ // 检查是否有多个菜单面板
+ const menus = popper.querySelectorAll('.el-cascader-menu')
+ if (menus.length > 1) {
+ // 保留第一个菜单,移除后面的
+ for (let i = this.resOwnerSelected.length; i < menus.length; i++) {
+ menus[i].style.display = 'none'
+ }
+ }
+ }
+ })
+ },
// 下拉面板打开时,如果当前没有关键字,也确保是懒加载模式
handleResOwnerVisibleChange(visible) {
if (!visible) return;
// 如果没有关键字,就强制回到懒加载模式
+ this.handleExpand()
const keyword = (this.$refs.resOwnerCascader && this.$refs.resOwnerCascader.inputValue) || '';
if (!keyword) {
this.resOwnerSearchMode = false;
@@ -1647,18 +1681,15 @@ export default {
sessionStorage.setItem('courseDetail', JSON.stringify(row));
this.$router.push({ path: '/iframe/course/coursemanage-remote' });
},
- // 克隆一个用于懒加载的节点:只保留当前层必要字段,不预置 children,避免 Element Cascader 出现重复节点
+ // 克隆一个用于懒加载的节点:只保留当前层必要字段,不带 children,避免节点被重复追加
cloneOrgNodeForLazy(node = {}) {
- const base = {
- id: node.id,
- name: node.name,
- leaf: node.leaf,
- };
- // 叶子节点不带 children,避免级联组件显示右侧空面板
- if (!node.leaf && Array.isArray(node.children) && node.children.length > 0) {
- base.children = node.children;
- }
- return base;
+ const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+ return {
+ id: node.id,
+ name: node.name,
+ // 明确叶子状态:有子节点则标记为非叶子,让懒加载去取;否则标记为叶子,禁止再展开空面板
+ leaf: node.leaf === true ? true : hasChildren ? false : true,
+ };
},
// 前端“伪懒加载”:根据本地全量机构树按需返回子节点
// 为了让 el-cascader 的 loading 动画有可见效果,这里故意加入一个很小的延时再 resolve
@@ -2705,7 +2736,7 @@ export default {
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, .2);
line-height: 32px;
- padding: 0 15px 0 10px;
+ padding-left: 10px;
&:focus {
border-color: #4284F7;
}