From 500fa403ba72ab3b1328ccd8a7429a63e15c8bf0 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sun, 21 Nov 2021 06:23:24 -0600
Subject: [PATCH] fix(components): [el-select-v2] set option default value 0
 (#4417)

* fix(components): [el-select-v2] set option defalut value 0

* fix: add hasModelValue
---
 .../select-v2/__tests__/select.spec.ts        | 25 +++++++++++++++++++
 packages/components/select-v2/src/select.vue  |  2 +-
 .../components/select-v2/src/useSelect.ts     | 15 ++++++++---
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/components/select-v2/__tests__/select.spec.ts b/packages/components/select-v2/__tests__/select.spec.ts
index 4c515ed115..c6c8112927 100644
--- a/packages/components/select-v2/__tests__/select.spec.ts
+++ b/packages/components/select-v2/__tests__/select.spec.ts
@@ -803,6 +803,31 @@ describe('Select', () => {
     expect(placeholder.text()).toBe(DEFAULT_PLACEHOLDER)
   })
 
+  it('default value is 0', async () => {
+    const wrapper = createSelect({
+      data: () => ({
+        value: 0,
+        options: [
+          {
+            value: 0,
+            label: 'option_a',
+          },
+          {
+            value: 1,
+            label: 'option_b',
+          },
+          {
+            value: 2,
+            label: 'option_c',
+          },
+        ],
+      }),
+    })
+    await nextTick()
+    const placeholder = wrapper.find(`.${PLACEHOLDER_CLASS_NAME}`)
+    expect(placeholder.text()).toBe('option_a')
+  })
+
   it('emptyText error show', async () => {
     const wrapper = createSelect({
       data() {
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index e07daaf73b..46dbbfa336 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -198,7 +198,7 @@
                 states.isComposing ||
                 (placeholder && multiple
                   ? modelValue.length === 0
-                  : !modelValue),
+                  : !hasModelValue),
             }"
           >
             {{ currentPlaceholder }}
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index ea8761591e..6f313339c0 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -95,12 +95,18 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     return totalHeight > props.height ? props.height : totalHeight
   })
 
+  const hasModelValue = computed(() => {
+    return (
+      props.modelValue !== undefined &&
+      props.modelValue !== null &&
+      props.modelValue !== ''
+    )
+  })
+
   const showClearBtn = computed(() => {
     const hasValue = props.multiple
       ? Array.isArray(props.modelValue) && props.modelValue.length > 0
-      : props.modelValue !== undefined &&
-        props.modelValue !== null &&
-        props.modelValue !== ''
+      : hasModelValue.value
 
     const criteria =
       props.clearable &&
@@ -659,7 +665,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
         states.cachedOptions = []
       }
     } else {
-      if (props.modelValue) {
+      if (hasModelValue.value) {
         const options = filteredOptions.value
         const selectedItemIndex = options.findIndex(
           (option) => getValueKey(option) === props.modelValue
@@ -746,6 +752,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     inputWrapperStyle,
     popperSize,
     dropdownMenuVisible,
+    hasModelValue,
     // readonly,
     shouldShowPlaceholder,
     selectDisabled,