feat(components): [select & select-v2] explicit export selectedLabel (#18350)

* feat(components): [select] export selectedLabel

* docs: update

* docs: update th

* docs: update selectedLabel version

docs/en-US/component/select-v2.md

@@ -299,7 +299,8 @@ select-v2/custom-label
 
 ### Exposes
 
-| Method | Description                                     | Type                    |
+| Name                   | Description                                     | Type                                       |
-| ------ | ----------------------------------------------- | ----------------------- |
+| ---------------------- | ----------------------------------------------- | ------------------------------------------ |
-| focus  | focus the Input component                       | ^[Function]`() => void` |
+| focus                  | focus the Input component                       | ^[Function]`() => void`                    |
-| blur   | blur the Input component, and hide the dropdown | ^[Function]`() => void` |
+| blur                   | blur the Input component, and hide the dropdown | ^[Function]`() => void`                    |
+| selectedLabel ^(2.8.5) | get the currently selected label                | ^[object]`ComputedRef<string \| string[]>` |

docs/en-US/component/select.md

@@ -264,10 +264,11 @@ select/custom-label
 
 ### Select Exposes
 
-| Method | Description                                     | Type                    |
+| Name                   | Description                                     | Type                                       |
-| ------ | ----------------------------------------------- | ----------------------- |
+| ---------------------- | ----------------------------------------------- | ------------------------------------------ |
-| focus  | focus the Input component                       | ^[Function]`() => void` |
+| focus                  | focus the Input component                       | ^[Function]`() => void`                    |
-| blur   | blur the Input component, and hide the dropdown | ^[Function]`() => void` |
+| blur                   | blur the Input component, and hide the dropdown | ^[Function]`() => void`                    |
+| selectedLabel ^(2.8.5) | get the currently selected label                | ^[object]`ComputedRef<string \| string[]>` |
 
 ## Option Group API
 

packages/components/select-v2/__tests__/select.test.ts

@@ -533,6 +533,42 @@ describe('Select', () => {
     )
   })
 
+  describe('expose', () => {
+    it('select label', async () => {
+      const wrapper = createSelect({
+        data: () => {
+          return {
+            options: [
+              { value: 'value1', label: 'label1' },
+              { value: 'value2', label: 'label2' },
+            ],
+            multiple: false,
+            value: '',
+          }
+        },
+      })
+      await nextTick()
+      const select = wrapper.findComponent(Select)
+      const selectVm = select.vm as any
+      const vm = wrapper.vm as any
+
+      const options = getOptions()
+      options[0].click()
+      expect(selectVm.selectedLabel).toBe('label1')
+      vm.value = 'value2'
+      await nextTick()
+      expect(selectVm.selectedLabel).toBe('label2')
+
+      vm.multiple = true
+      vm.value = []
+      await nextTick()
+      expect(selectVm.selectedLabel).toStrictEqual([])
+      vm.value = ['value1', 'value2']
+      await nextTick()
+      expect(selectVm.selectedLabel).toStrictEqual(['label1', 'label2'])
+    })
+  })
+
   describe('multiple', () => {
     it('multiple select', async () => {
       const wrapper = createSelect({

packages/components/select-v2/src/select.vue

@@ -329,9 +329,17 @@ export default defineComponent({
       onKeyboardSelect: API.onKeyboardSelect,
     })
 
+    const selectedLabel = computed(() => {
+      if (!props.multiple) {
+        return API.states.selectedLabel
+      }
+      return API.states.cachedOptions.map((i) => i.label as string)
+    })
+
     return {
       ...API,
       modelValue,
+      selectedLabel,
     }
   },
 })

packages/components/select/__tests__/select.test.ts

@@ -380,6 +380,51 @@ describe('Select', () => {
     expect(wrapper.find(`.${PLACEHOLDER_CLASS_NAME}`).text()).toBe('双皮奶')
   })
 
+  test('expose select label', async () => {
+    wrapper = _mount(
+      `
+      <el-select v-model="value" :multiple="multiple">
+        <el-option
+          v-for="item in options"
+          :label="item.label"
+          :key="item.value"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    `,
+      () => ({
+        options: [
+          { value: '选项1', label: '黄金糕' },
+          { value: '选项2', label: '双皮奶' },
+        ],
+        value: '选项2',
+        multiple: false,
+      })
+    )
+    await nextTick()
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+    const vm = wrapper.vm as any
+    const selectVm = select.vm as any
+
+    expect(selectVm.selectedLabel).toBe('双皮奶')
+
+    const options = getOptions()
+    options[0].click()
+    await nextTick()
+    expect(selectVm.selectedLabel).toBe('黄金糕')
+    vm.value = ''
+    await nextTick()
+    expect(selectVm.selectedLabel).toBe('')
+
+    vm.value = []
+    vm.multiple = true
+    await nextTick()
+    expect(selectVm.selectedLabel).toStrictEqual([])
+    vm.value = ['选项1', '选项2']
+    await nextTick()
+    expect(selectVm.selectedLabel).toStrictEqual(['黄金糕', '双皮奶'])
+  })
+
   test('set default value to object', async () => {
     wrapper = _mount(
       `

packages/components/select/src/select.vue

@@ -369,9 +369,17 @@ export default defineComponent({
       }) as unknown as SelectContext
     )
 
+    const selectedLabel = computed(() => {
+      if (!props.multiple) {
+        return API.states.selectedLabel
+      }
+      return API.states.selected.map((i) => i.currentLabel as string)
+    })
+
     return {
       ...API,
       modelValue,
+      selectedLabel,
     }
   },
 })