feat(Cascader): add className option (#8882)

src/cascader/Cascader.tsx

@@ -12,6 +12,7 @@ export type CascaderOption = {
   text?: string;
   value?: string | number;
   children?: CascaderOption[];
+  className?: unknown;
   // for custom filed names
   [key: string]: any;
 };
@@ -56,7 +57,11 @@ export default defineComponent({
       activeTab: 0,
     });
 
-    const { text: textKey, value: valueKey, children: childrenKey } = extend(
+    const {
+      text: textKey,
+      value: valueKey,
+      children: childrenKey,
+    } = extend(
       {
         text: 'text',
         value: 'value',
@@ -210,7 +215,7 @@ export default defineComponent({
 
         return (
           <li
-            class={bem('option', { selected: isSelected })}
+            class={[bem('option', { selected: isSelected }), option.className]}
             style={{ color: isSelected ? props.activeColor : undefined }}
             onClick={() => onSelect(option, tabIndex)}
           >

src/cascader/README.md

@@ -215,11 +215,12 @@ export default {
 
 ### Data Structure of Option
 
-| Key      | Description      | Type               |
-| -------- | ---------------- | ------------------ |
-| text     | Option text      | _string_           |
-| value    | Option value     | _string \| number_ |
-| children | Cascade children | _Option[]_         |
+| Key                | Description              | Type                        |
+| ------------------ | ------------------------ | --------------------------- |
+| text               | Option text              | _string_                    |
+| value              | Option value             | _string \| number_          |
+| children           | Cascade children         | _Option[]_                  |
+| className `v3.1.0` | className for the option | _string \| Array \| object_ |
 
 ### Events
 

src/cascader/README.zh-CN.md

@@ -227,11 +227,12 @@ export default {
 
 `options` 属性是一个由对象构成的数组，数组中的每个对象配置一个可选项，对象可以包含以下值：
 
-| 键名     | 说明         | 类型               |
-| -------- | ------------ | ------------------ |
-| text     | 选项文字     | _string_           |
-| value    | 选项对应的值 | _string \| number_ |
-| children | 子选项列表   | _Option[]_         |
+| 键名               | 说明                     | 类型                        |
+| ------------------ | ------------------------ | --------------------------- |
+| text               | 选项文字                 | _string_                    |
+| value              | 选项对应的值             | _string \| number_          |
+| children           | 子选项列表               | _Option[]_                  |
+| className `v3.1.0` | 为对应列添加额外的 class | _string \| Array \| object_ |
 
 ### Events
 

src/cascader/test/index.spec.ts

@@ -104,7 +104,7 @@ test('should render title slot correctly', () => {
 //   expect(lastSelectedOption.html()).toMatchSnapshot();
 // });
 
-test('should reset selected options when value is set to emtpy', async () => {
+test('should reset selected options when value is set to empty', async () => {
   const wrapper = mount(Cascader, {
     props: {
       options,
@@ -204,3 +204,15 @@ test('should emit click-tab event when a tab is clicked', async () => {
     options[0].children[0].text,
   ]);
 });
+
+test('should allow to custom the className of option', async () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      options: [{ value: '1', text: 'foo', className: 'foo' }],
+    },
+  });
+
+  await later();
+  const option = wrapper.find('.van-cascader__option');
+  expect(option.classes()).toContain('foo');
+});