feat(Cascader): add option slot (#9036)

* feat(Cascader): add option-text slot

* chore: adjust slot

src/cascader/Cascader.tsx

@@ -59,11 +59,7 @@ export default defineComponent({
       activeTab: 0,
     });
 
-    const {
+    const { text: textKey, value: valueKey, children: childrenKey } = extend(
-      text: textKey,
-      value: valueKey,
-      children: childrenKey,
-    } = extend(
       {
         text: 'text',
         value: 'value',
@@ -210,22 +206,26 @@ export default defineComponent({
       </div>
     );
 
-    const renderOptions = (
+    const renderOption = (
-      options: CascaderOption[],
+      option: CascaderOption,
       selectedOption: CascaderOption | null,
       tabIndex: number
     ) => {
-      const renderOption = (option: CascaderOption) => {
+      const selected =
-        const isSelected =
         selectedOption && option[valueKey] === selectedOption[valueKey];
-        const color =
+      const color = option.color || (selected ? props.activeColor : undefined);
-          option.color || (isSelected ? props.activeColor : undefined);
+
+      const Text = slots.option ? (
+        slots.option({ option, selected })
+      ) : (
+        <span>{option[textKey]}</span>
+      );
 
       return (
         <li
           class={[
             bem('option', {
-                selected: isSelected,
+              selected,
               disabled: option.disabled,
             }),
             option.className,
@@ -233,16 +233,25 @@ export default defineComponent({
           style={{ color }}
           onClick={() => onSelect(option, tabIndex)}
         >
-            <span>{option[textKey]}</span>
+          {Text}
-            {isSelected ? (
+          {selected ? (
             <Icon name="success" class={bem('selected-icon')} />
           ) : null}
         </li>
       );
     };
 
-      return <ul class={bem('options')}>{options.map(renderOption)}</ul>;
+    const renderOptions = (
-    };
+      options: CascaderOption[],
+      selectedOption: CascaderOption | null,
+      tabIndex: number
+    ) => (
+      <ul class={bem('options')}>
+        {options.map((option) =>
+          renderOption(option, selectedOption, tabIndex)
+        )}
+      </ul>
+    );
 
     const renderTab = (tab: CascaderTab, tabIndex: number) => {
       const { options, selectedOption } = tab;

src/cascader/README.md

@@ -235,9 +235,10 @@ export default {
 
 ### Slots
 
-| Name  | Description  |
+| Name | Description | SlotProps |
-| ----- | ------------ |
+| --- | --- | --- |
-| title | Custom title |
+| title | Custom title | - |
+| option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ |
 
 ### CSS Variables
 

src/cascader/README.zh-CN.md

@@ -247,9 +247,10 @@ export default {
 
 ### Slots
 
-| 名称  | 说明           |
+| 名称            | 说明           | 参数                                    |
-| ----- | -------------- |
+| --------------- | -------------- | --------------------------------------- |
-| title | 自定义顶部标题 |
+| title           | 自定义顶部标题 | -                                       |
+| option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
 
 ### 样式变量
 

src/cascader/test/__snapshots__/index.spec.ts.snap

@@ -5,6 +5,12 @@ exports[`should change close icon when using close-icon prop 1`] = `
 </i>
 `;
 
+exports[`should render option slot correctly 1`] = `
+<li class="van-cascader__option">
+  Custom Option foo
+</li>
+`;
+
 exports[`should render title slot correctly 1`] = `
 <h2 class="van-cascader__title">
   Custom Title

src/cascader/test/index.spec.ts

@@ -88,6 +88,20 @@ test('should render title slot correctly', () => {
   expect(wrapper.find('.van-cascader__title').html()).toMatchSnapshot();
 });
 
+test('should render option slot correctly', async () => {
+  const option = { value: '1', text: 'foo' };
+  const wrapper = mount(Cascader, {
+    props: {
+      options: [option],
+    },
+    slots: {
+      option: ({ option }) => `Custom Option ${option.text}`,
+    },
+  });
+  await later();
+  expect(wrapper.find('.van-cascader__option').html()).toMatchSnapshot();
+});
+
 // TODO
 // test('should select correct option when value changed', async () => {
 //   const wrapper = mount(Cascader, {