diff --git a/packages/components/tabs/__tests__/tabs.test.ts b/packages/components/tabs/__tests__/tabs.test.ts
index 41f8b53534c13..38fc0072da869 100644
--- a/packages/components/tabs/__tests__/tabs.test.ts
+++ b/packages/components/tabs/__tests__/tabs.test.ts
@@ -729,4 +729,40 @@ describe('Tabs.vue', () => {
mockComputedStyle.mockRestore()
wrapper.unmount()
})
+
+ test('value type', async () => {
+ const wrapper = mount({
+ components: {
+ 'el-tabs': Tabs,
+ 'el-tab-pane': TabPane,
+ },
+ data() {
+ return {
+ activeName: 0,
+ }
+ },
+ methods: {
+ handleClick(tab) {
+ this.activeName = tab.paneName
+ },
+ },
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `,
+ })
+
+ const navWrapper = wrapper.findComponent(TabNav)
+ await nextTick()
+
+ const navItemsWrapper = navWrapper.findAll('.el-tabs__item')
+ ;[1, 0, 2, 0, 3, 0, 1].forEach((val) => {
+ navItemsWrapper[val].trigger('click')
+ expect(wrapper.vm.activeName).toEqual(val)
+ })
+ })
})
diff --git a/packages/components/tabs/src/tab-nav.tsx b/packages/components/tabs/src/tab-nav.tsx
index 9333c4d98f945..400f8d32d1a95 100644
--- a/packages/components/tabs/src/tab-nav.tsx
+++ b/packages/components/tabs/src/tab-nav.tsx
@@ -308,7 +308,7 @@ const TabNav = defineComponent({
: null
const tabs = props.panes.map((pane, index) => {
- const tabName = pane.props.name || pane.index || `${index}`
+ const tabName = pane.props.name ?? pane.index ?? `${index}`
const closable: boolean = pane.isClosable || props.editable
pane.index = `${index}`
diff --git a/packages/components/tabs/src/tab-pane.ts b/packages/components/tabs/src/tab-pane.ts
index 4e0507306e61b..7c3781ceed3ee 100644
--- a/packages/components/tabs/src/tab-pane.ts
+++ b/packages/components/tabs/src/tab-pane.ts
@@ -9,7 +9,6 @@ export const tabPaneProps = buildProps({
},
name: {
type: [String, Number],
- default: '',
},
closable: Boolean,
disabled: Boolean,
diff --git a/packages/components/tabs/src/tab-pane.vue b/packages/components/tabs/src/tab-pane.vue
index 20d7b141d7219..751b0408652ea 100644
--- a/packages/components/tabs/src/tab-pane.vue
+++ b/packages/components/tabs/src/tab-pane.vue
@@ -47,10 +47,10 @@ const ns = useNamespace('tab-pane')
const index = ref()
const isClosable = computed(() => props.closable || tabsRoot.props.closable)
const active = eagerComputed(
- () => tabsRoot.currentName.value === (props.name || index.value)
+ () => tabsRoot.currentName.value === (props.name ?? index.value)
)
const loaded = ref(active.value)
-const paneName = computed(() => props.name || index.value)
+const paneName = computed(() => props.name ?? index.value)
const shouldBeRender = eagerComputed(
() => !props.lazy || loaded.value || active.value
)
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index f151e55b410b1..f19db4524330c 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -12,6 +12,7 @@ import {
definePropType,
isNumber,
isString,
+ isUndefined,
} from '@element-plus/utils'
import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
import ElIcon from '@element-plus/components/icon'
@@ -35,13 +36,11 @@ export const tabsProps = buildProps({
},
activeName: {
type: [String, Number],
- default: '',
},
closable: Boolean,
addable: Boolean,
modelValue: {
type: [String, Number],
- default: '',
},
editable: Boolean,
tabPosition: {
@@ -87,7 +86,9 @@ export default defineComponent({
const nav$ = ref()
const panes = reactive>({})
- const currentName = ref(props.modelValue || props.activeName || '0')
+ const currentName = ref(
+ props.modelValue ?? props.activeName ?? '0'
+ )
const changeCurrentName = (value: TabPanelName) => {
currentName.value = value
@@ -95,9 +96,9 @@ export default defineComponent({
emit('tab-change', value)
}
- const setCurrentName = async (value: TabPanelName) => {
+ const setCurrentName = async (value?: TabPanelName) => {
// should do nothing.
- if (currentName.value === value) return
+ if (currentName.value === value || isUndefined(value)) return
try {
const canLeave = await props.beforeLeave?.(value, currentName.value)
@@ -123,7 +124,7 @@ export default defineComponent({
}
const handleTabRemove = (pane: TabsPaneContext, ev: Event) => {
- if (pane.props.disabled) return
+ if (pane.props.disabled || isUndefined(pane.props.name)) return
ev.stopPropagation()
emit('edit', pane.props.name, 'remove')
emit('tab-remove', pane.props.name)