Skip to content

实现tabs嵌套过滤 #1090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

实现tabs嵌套过滤 #1090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
984d2b7
Update assist.js
bushixuanqi Aug 19, 2022
3e3e074
Update pane.vue
bushixuanqi Aug 19, 2022
184b548
Update tabs.vue
bushixuanqi Aug 19, 2022
c991dd7
Update assist.js
bushixuanqi Aug 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/tabs/pane.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
default: ''
},
icon: {
type: String
type: String,
default: ''
},
disabled: {
type: Boolean,
Expand Down
38 changes: 16 additions & 22 deletions src/components/tabs/tabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,6 @@
default: false
},
beforeRemove: Function,
// Tabs 嵌套时，用 name 区分层级
name: {
type: String
},
// 4.3.0
draggable: {
type: Boolean,
Expand All @@ -144,7 +140,8 @@
contextMenuStyles: {
top: 0,
left: 0
}
},
isRepeat: false //记录label是否重复
};
},
computed: {
Expand Down Expand Up @@ -239,42 +236,39 @@
methods: {
getTabs () {
// return this.$children.filter(item => item.$options.name === 'TabPane');
const AllTabPanes = findComponentsDownward(this, 'TabPane');
const TabPanes = [];

AllTabPanes.forEach(item => {
if (item.tab && this.name) {
if (item.tab === this.name) {
TabPanes.push(item);
}
} else {
TabPanes.push(item);
const repeat = {};
let isRepeat = false;
const AllTabPanes = findComponentsDownward(this, 'TabPane', (child) => {
if (!isRepeat) {
if (repeat[child.name]) isRepeat = true;
else repeat[child.name] = true;
}
if (child.$options.name === 'Tabs') return true;
});

// 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序
TabPanes.sort((a, b) => {
AllTabPanes.sort((a, b) => {
if (a.index && b.index) {
return a.index > b.index ? 1 : -1;
}
});
return TabPanes;
return AllTabPanes;
},
updateNav () {
this.navList = [];
//label无重时,pane.currentName无值时的默认值优先采用pane.label
if (!pane.currentName) pane.currentName = this.isRepeat ? index : pane.label;
this.getTabs().forEach((pane, index) => {
this.navList.push({
labelType: typeof pane.label,
label: pane.label,
icon: pane.icon || '',
name: pane.currentName || index,
icon: pane.icon,
name: pane.currentName,
disabled: pane.disabled,
closable: pane.closable,
contextMenu: pane.contextMenu
});
if (!pane.currentName) pane.currentName = index;
if (index === 0) {
if (!this.activeKey) this.activeKey = pane.currentName || index;
if (!this.activeKey) this.activeKey = pane.currentName;
}
});
this.updateStatus();
Expand Down
5 changes: 4 additions & 1 deletion src/utils/assist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,11 @@ export function findComponentDownward (context, componentName) {
}

// Find components downward
export function findComponentsDownward (context, componentName) {
export function findComponentsDownward(context, componentName, filterName) {
return context.$children.reduce((components, child) => {
if (typeof filterName === 'function') {
if (filterName(child, components)) return components;
} else if (filterName && child.$options.name === filterName) return components;
if (child.$options.name === componentName) components.push(child);
const foundChilds = findComponentsDownward(child, componentName);
return components.concat(foundChilds);
Expand Down