diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 5319cae7f..87509e634 100644
--- a/src/cascader/Cascader.tsx
+++ b/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 (
onSelect(option, tabIndex)}
>
diff --git a/src/cascader/README.md b/src/cascader/README.md
index 3dd5ad0d5..f857f6d92 100644
--- a/src/cascader/README.md
+++ b/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
diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md
index c873f4ef3..5472ba774 100644
--- a/src/cascader/README.zh-CN.md
+++ b/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
diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts
index 976c30331..c40f2f0d0 100644
--- a/src/cascader/test/index.spec.ts
+++ b/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');
+});