diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 87509e634..e63a7df59 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -11,6 +11,7 @@ const [name, bem, t] = createNamespace('cascader');
export type CascaderOption = {
text?: string;
value?: string | number;
+ color?: string;
children?: CascaderOption[];
className?: unknown;
// for custom filed names
@@ -212,11 +213,13 @@ export default defineComponent({
const renderOption = (option: CascaderOption) => {
const isSelected =
selectedOption && option[valueKey] === selectedOption[valueKey];
+ const color =
+ option.color || (isSelected ? props.activeColor : undefined);
return (
onSelect(option, tabIndex)}
>
{option[textKey]}
diff --git a/src/cascader/README.md b/src/cascader/README.md
index f857f6d92..6deef7301 100644
--- a/src/cascader/README.md
+++ b/src/cascader/README.md
@@ -219,6 +219,7 @@ export default {
| ------------------ | ------------------------ | --------------------------- |
| text | Option text | _string_ |
| value | Option value | _string \| number_ |
+| color `v3.1.0` | Text color | _string_ |
| children | Cascade children | _Option[]_ |
| className `v3.1.0` | className for the option | _string \| Array \| object_ |
diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md
index 5472ba774..d8073082a 100644
--- a/src/cascader/README.zh-CN.md
+++ b/src/cascader/README.zh-CN.md
@@ -229,8 +229,9 @@ export default {
| 键名 | 说明 | 类型 |
| ------------------ | ------------------------ | --------------------------- |
-| text | 选项文字 | _string_ |
-| value | 选项对应的值 | _string \| number_ |
+| text | 选项文字(必填) | _string_ |
+| value | 选项对应的值(必填) | _string \| number_ |
+| color `v3.1.0` | 选项文字颜色 | _string_ |
| children | 子选项列表 | _Option[]_ |
| className `v3.1.0` | 为对应列添加额外的 class | _string \| Array \| object_ |
diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts
index c40f2f0d0..ed3951adf 100644
--- a/src/cascader/test/index.spec.ts
+++ b/src/cascader/test/index.spec.ts
@@ -216,3 +216,15 @@ test('should allow to custom the className of option', async () => {
const option = wrapper.find('.van-cascader__option');
expect(option.classes()).toContain('foo');
});
+
+test('should allow to custom the color of option', async () => {
+ const wrapper = mount(Cascader, {
+ props: {
+ options: [{ value: '1', text: 'foo', color: 'red' }],
+ },
+ });
+
+ await later();
+ const option = wrapper.find('.van-cascader__option');
+ expect(option.style.color).toEqual('red');
+});