fix(components): [tabs] name is number 0 become a string (#8469)

element-plus · Jun 29, 2022 · 08e0204 · 08e0204
1 parent 2d8a9e4
commit 08e0204
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 10 deletions.
diff --git 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: `
+        <el-tabs :active-name="activeName" @tab-click="handleClick">
+          <el-tab-pane :name="0" label="label-1">A</el-tab-pane>
+          <el-tab-pane :name="1" label="label-2">B</el-tab-pane>
+          <el-tab-pane :name="2" label="label-3" ref="pane-click">C</el-tab-pane>
+          <el-tab-pane :name="3" label="label-4">D</el-tab-pane>
+        </el-tabs>
+      `,
+    })
+
+    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
@@ -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
@@ -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
@@ -47,10 +47,10 @@ const ns = useNamespace('tab-pane')
 const index = ref<string>()
 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
@@ -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,17 +86,19 @@ export default defineComponent({
 
     const nav$ = ref<TabNavInstance>()
     const panes = reactive<Record<number, TabsPaneContext>>({})
-    const currentName = ref(props.modelValue || props.activeName || '0')
+    const currentName = ref<TabPanelName>(
+      props.modelValue ?? props.activeName ?? '0'
+    )
 
     const changeCurrentName = (value: TabPanelName) => {
       currentName.value = value
       emit(UPDATE_MODEL_EVENT, value)
       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)