diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx index 2836c3488..938f10f77 100644 --- a/src/cell/Cell.tsx +++ b/src/cell/Cell.tsx @@ -33,7 +33,7 @@ export const cellProps = { valueClass: unknownProp, labelClass: unknownProp, titleClass: unknownProp, - titleStyle: (null as unknown) as PropType, + titleStyle: null as unknown as PropType, arrowDirection: String as PropType, clickable: { type: Boolean as PropType, @@ -76,13 +76,16 @@ export default defineComponent({ }; const renderValue = () => { - const hasValue = slots.default || isDef(props.value); + // default slot is deprecated + // should be removed in next major version + const slot = slots.value || slots.default; + const hasValue = slot || isDef(props.value); if (hasValue) { const hasTitle = slots.title || isDef(props.title); return (
- {slots.default ? slots.default() : {props.value}} + {slot ? slot() : {props.value}}
); } diff --git a/src/cell/README.md b/src/cell/README.md index f787bbc22..d3927aa81 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -183,14 +183,14 @@ app.use(CellGroup); ### Cell Slots -| Name | Description | -| ---------- | --------------------------------- | -| default | Custom value | -| icon | Custom icon | -| title | Custom title | -| label | Custom label | -| right-icon | Custom right icon | -| extra | Custom extra content on the right | +| Name | Description | +| -------------- | --------------------------------- | +| title | Custom title | +| value `v3.1.1` | Custom value | +| label | Custom label | +| icon | Custom left icon | +| right-icon | Custom right icon | +| extra | Custom extra content on the right | ### CSS Variables diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index fa9a433b4..2480446ea 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -188,14 +188,14 @@ app.use(CellGroup); ### Cell Slots -| 名称 | 说明 | -| ---------- | ----------------------------- | -| default | 自定义右侧 value 的内容 | -| title | 自定义左侧 title 的内容 | -| label | 自定义标题下方 label 的内容 | -| icon | 自定义左侧图标 | -| right-icon | 自定义右侧按钮,默认为`arrow` | -| extra | 自定义单元格最右侧的额外内容 | +| 名称 | 说明 | +| -------------- | ---------------------------- | +| title | 自定义左侧标题 | +| value `v3.1.1` | 自定义右侧内容 | +| label | 自定义标题下方的描述信息 | +| icon | 自定义左侧图标 | +| right-icon | 自定义右侧图标 | +| extra | 自定义单元格最右侧的额外内容 | ### 样式变量 diff --git a/src/cell/test/__snapshots__/index.spec.ts.snap b/src/cell/test/__snapshots__/index.spec.ts.snap index 6e7aa44ee..4fa0247e7 100644 --- a/src/cell/test/__snapshots__/index.spec.ts.snap +++ b/src/cell/test/__snapshots__/index.spec.ts.snap @@ -15,7 +15,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = ` exports[`should render default slot correctly 1`] = `
- Custom Default + Custom Value
`; @@ -52,3 +52,11 @@ exports[`should render title slot correctly 1`] = ` `; + +exports[`should render value slot correctly 1`] = ` +
+
+ Custom Value +
+
+`; diff --git a/src/cell/test/index.spec.ts b/src/cell/test/index.spec.ts index 85843977c..46a9fadec 100644 --- a/src/cell/test/index.spec.ts +++ b/src/cell/test/index.spec.ts @@ -4,7 +4,16 @@ import { mount } from '../../../test'; test('should render default slot correctly', () => { const wrapper = mount(Cell, { slots: { - default: () => 'Custom Default', + default: () => 'Custom Value', + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render value slot correctly', () => { + const wrapper = mount(Cell, { + slots: { + value: () => 'Custom Value', }, }); expect(wrapper.html()).toMatchSnapshot();