!451 feat(cascader): 新增 selectLabel 方法

jevin98 · sleeprite · commit 14710b7c1eee · 2025-05-26T08:04:44.000Z
* feat(cascader): add defineExpose selectLabel
diff --git a/docs/src/document/zh-CN/components/cascader.md b/docs/src/document/zh-CN/components/cascader.md
@@ -1166,6 +1166,17 @@ const options3=[
 
 :::
 
+::: title Cascader 方法
+:::
+
+::: table
+
+| 属性 | 描述         | 属性类型 | 版本 |
+| ---- | -------------- |--------|-------|
+| selectLabel | 选中值对应的文本 | `ComputedRef<string \| string[]>`  | `2.19.4` |
+
+:::
+
 ::: title CascaderPanel 属性
 :::
 
diff --git a/packages/component/component/cascader/__tests__/cascader.test.tsx b/packages/component/component/cascader/__tests__/cascader.test.tsx
@@ -185,4 +185,81 @@ describe("LayCascader", () => {
 
     expect((component.vm as any)._context.flatData.value.length).toBe(3);
   });
+
+  test("expose selectLabel", async () => {
+    const wrapper = mount({
+      setup() {
+        const modelValue = ref("1/1-1/1-1-1");
+        const options = [
+          {
+            label: "label1",
+            value: "1",
+            children: [
+              {
+                label: "label1-1",
+                value: "1-1",
+                children: [{ label: "label1-1-1", value: "1-1-1" }],
+              },
+            ],
+          },
+          { label: "label2", value: "2" },
+          { label: "label3", value: "3" },
+        ];
+
+        return () => (
+          <LayCascader
+            ref="cascaderRef"
+            options={options}
+            v-model={modelValue.value}
+          ></LayCascader>
+        );
+      },
+    });
+
+    await nextTick();
+
+    const component = wrapper.findComponent(LayCascader);
+
+    expect(component.vm.selectLabel).toBe("label1 / label1-1 / label1-1-1");
+  });
+
+  test("expose selectLabel multiple", async () => {
+    const wrapper = mount({
+      setup() {
+        const modelValue = ref(["1-1-1", "2"]);
+        const options = [
+          {
+            label: "label1",
+            value: "1",
+            children: [
+              {
+                label: "label1-1",
+                value: "1-1",
+                children: [{ label: "label1-1-1", value: "1-1-1" }],
+              },
+            ],
+          },
+          { label: "label2", value: "2" },
+          { label: "label3", value: "3" },
+        ];
+
+        return () => (
+          <LayCascader
+            ref="cascaderRef"
+            options={options}
+            v-model={modelValue.value}
+            multiple
+          ></LayCascader>
+        );
+      },
+    });
+
+    const component = wrapper.findComponent(LayCascader);
+
+    await nextTick();
+    expect(component.vm.selectLabel).toEqual([
+      "label1/label1-1/label1-1-1",
+      "label2",
+    ]);
+  });
 });
diff --git a/packages/component/component/cascader/index.vue b/packages/component/component/cascader/index.vue
@@ -189,7 +189,6 @@ const openState = ref(false);
 const _isSearching = ref(false);
 const _searchValue = ref("");
 const _matchedList: Ref<Array<CascaderPanelItemPropsInternal>> = ref([]);
-const _innerProcess = computed(() => _context);
 const _dataSource = ref(props.options);
 const _multiple = ref(props.multiple);
 const _decollator = ref(props.decollator);
@@ -201,11 +200,8 @@ const _replaceFields = ref({
   value: props.replaceFields?.value ?? "value",
   children: props.replaceFields?.children ?? "children",
 });
-const _selectKeys = ref<Array<string>>(_innerProcess.value.selectKeys.value);
-const _displayValue = computed({
-  get: () => _innerProcess.value.selectLabel.value,
-  set: (v) => {},
-});
+const _selectKeys = ref<Array<string>>(_context.selectKeys.value);
+const _displayValue = computed(() => _context.selectLabel.value);
 const _changeOnSelect = ref(props.changeOnSelect);
 /**
  * 执行搜索
@@ -214,21 +210,21 @@ const _changeOnSelect = ref(props.changeOnSelect);
 const doSearchValue = (str: string) =>
   (props.search &&
     props.searchMethod &&
-    _innerProcess.value.sanitizer(props.searchMethod(str), undefined)) ||
-  _innerProcess.value.flatData.value.filter(
-    (a: CascaderPanelItemPropsInternal) => a.label.includes(str)
+    _context.sanitizer(props.searchMethod(str), undefined)) ||
+  _context.flatData.value.filter((a: CascaderPanelItemPropsInternal) =>
+    a.label.includes(str)
   );
 
 /**
  * 清空内容
  */
 const onClear = () => {
-  _innerProcess.value.multipleSelectItem.value.forEach(
+  _context.multipleSelectItem.value.forEach(
     (a) => (a.checked = a.indeterminate = false)
   );
-  _innerProcess.value.buildMultipleStatus();
-  _innerProcess.value.multipleSelectItem.value.clear();
-  _innerProcess.value.selectKeys.value = [];
+  _context.buildMultipleStatus();
+  _context.multipleSelectItem.value.clear();
+  _context.selectKeys.value = [];
   _selectKeys.value = [];
   emit("update:modelValue", _multiple.value ? [] : undefined);
   emit("clear");
@@ -241,19 +237,19 @@ const onRemove = (value: string, e: KeyboardEvent) => {
   let _k = value.split(_decollator.value);
   const k = _k.shift();
   let obj: CascaderPanelItemPropsInternal | undefined =
-    _innerProcess.value.flatData.value.find((a) => a.label === k);
+    _context.flatData.value.find((a) => a.label === k);
   while (obj && _k.length) {
     const k = _k.shift();
     obj = obj.children?.find((a) => a.label === k);
   }
   if (obj !== undefined)
-    _innerProcess.value.selectKeys.value.splice(
-      _innerProcess.value.selectKeys.value.findIndex((a) => a === obj!.value),
+    _context.selectKeys.value.splice(
+      _context.selectKeys.value.findIndex((a) => a === obj!.value),
       1
     );
   obj!.checked = obj!.indeterminate = false;
-  _innerProcess.value.multipleSelectItem.value.delete(obj!.value);
-  _innerProcess.value.buildMultipleStatus();
+  _context.multipleSelectItem.value.delete(obj!.value);
+  _context.buildMultipleStatus();
   _selectKeys.value = [..._selectKeys.value.filter((v) => v !== obj!.value)];
   emit("update:modelValue", _selectKeys.value);
   dropdownRef.value.hide();
@@ -263,7 +259,7 @@ const onRemove = (value: string, e: KeyboardEvent) => {
  * @param selectKeys 选中的keys
  */
 const _updateValue = (selectKeys: string[] | string) => {
-  _innerProcess.value.selectKeys.value =
+  _context.selectKeys.value =
     typeof selectKeys === "string"
       ? selectKeys.split(props.decollator)
       : selectKeys;
@@ -381,10 +377,10 @@ watch(
     if (!val) {
       // 在这里手工更新内部状态
       if (!_multiple.value && props.search) {
-        _innerProcess.value.selectKeys.value = [];
+        _context.selectKeys.value = [];
         nextTick(() => {
-          _innerProcess.value.selectKeys.value =
-            _innerProcess.value.showKeys.value = _selectKeys.value;
+          _context.selectKeys.value = _context.showKeys.value =
+            _selectKeys.value;
         });
       }
       _isSearching.value = false;
@@ -398,7 +394,11 @@ watch(
 watch(
   () => props.modelValue,
   () => {
-    _innerProcess.value.modelValue.value = props.modelValue;
+    _context.modelValue.value = props.modelValue;
   }
 );
+
+defineExpose({
+  selectLabel: _context.selectLabel,
+});
 </script>
