diff --git a/src/steps/steps.tsx b/src/steps/steps.tsx index 5c4117d44..819b00f58 100644 --- a/src/steps/steps.tsx +++ b/src/steps/steps.tsx @@ -15,7 +15,7 @@ export default mixins(getConfigReceiverMixins('steps')).extend({ props: { ...props }, data() { return { - indexMap: {}, + indexMap: {} as { [key: string]: number }, }; }, provide(): { steps: any } { @@ -48,35 +48,22 @@ export default mixins(getConfigReceiverMixins('steps')).extend({ }, }, render() { - const nodes = this.$scopedSlots?.default && this.$scopedSlots.default(null); const options = this.getOptions(); - const content = options.map((item, index) => { - const stepIndex = this.sequence === 'reverse' ? options.length - index - 1 : index; - const propsData = { - ...item, - index: stepIndex, - status: this.handleStatus(item, index), - }; + const optionsDisplayListLength = options.length; + const content = options.map((item, index) => { + const stepIndex = this.sequence === 'reverse' ? optionsDisplayListLength - index - 1 : index; const stepItem = ( ); - if (nodes && nodes[index]) { - const vnode = nodes[index]; - if (vnode.componentOptions) { - vnode.componentOptions.propsData = propsData; - return vnode; - } - return stepItem; - } return stepItem; }); return
{content}
; @@ -86,7 +73,7 @@ export default mixins(getConfigReceiverMixins('steps')).extend({ const nodes = this.$scopedSlots?.default && this.$scopedSlots.default(null); let options: Array; if (this.options && this.options.length) { - options = this.sequence === 'reverse' ? this.options.reverse() : this.options; + options = this.sequence === 'reverse' ? [...this.options].reverse() : this.options; } else { options = this.getOptionListBySlots(nodes); } @@ -115,10 +102,13 @@ export default mixins(getConfigReceiverMixins('steps')).extend({ handleStatus(item: TdStepItemProps, index: number) { if (item.status && item.status !== 'default') return item.status; if (this.current === 'FINISH') return 'finish'; + // value 不存在时,使用 index 进行区分每一个步骤 - if (item.value === undefined) { - if (this.sequence === 'positive' && index < this.current) return 'finish'; - if (this.sequence === 'reverse' && index > this.current) return 'finish'; + + if (item.value === undefined && typeof this.current === 'number') { + if (index < this.current) return 'finish'; + if (index === this.current) return 'process'; + return 'default'; } // value 存在,找匹配位置 if (item.value !== undefined) { @@ -127,11 +117,10 @@ export default mixins(getConfigReceiverMixins('steps')).extend({ console.warn('TDesign Steps Warn: The current `value` is not exist.'); return 'default'; } - if (this.sequence === 'positive' && index < matchIndex) return 'finish'; - if (this.sequence === 'reverse' && index > matchIndex) return 'finish'; + if (index < matchIndex) return 'finish'; + if (index === matchIndex) return 'process'; + return 'default'; } - const key = item.value === undefined ? index : item.value; - if (key === this.current) return 'process'; return 'default'; }, handleChange(cur: TdStepsProps['current'], prev: TdStepsProps['current'], e: MouseEvent) {