自定义，步骤条，样式

Question

需求:要动态写出跟上图一样的效果

箭头用动态class生成的吧

第一排 123 箭头是朝右

第二排 654 箭头朝左

3-4箭头朝下

有规律的

麻烦帮忙看这种怎么写

list=[{
            "stageName": "第一阶段",
            "status": "完成",
            "num": 1
        },
        {
            "stageName": "第二阶段",
            "status": "完成",
            "num": 2
        },
        {
            "stageName": "第三阶段",
            "status": "完成",
            "num": 3
        },
        {
            "stageName": "第四阶段",
            "status": "完成",
            "num": 4
        },
        {
            "stageName": "第五阶段",
            "status": "进行中",
            "num": 5
        },
        {
            "stageName": "第六阶段",
            "status": "未完成",
            "num": 6
        },
        {
            "stageName": "第七阶段",
            "status": "未完成",
            "num": 7
        },
        {
            "stageName": "第八阶段",
            "status": "未完成",
            "num": 8
        },
        {
            "stageName": "第九阶段",
            "status": "未完成",
            "num": 9
        },
        {
            "stageName": "第十阶段",
            "status": "未完成",
            "num": 10
        },
        {
            "stageName": "第十一阶段",
            "status": "未完成",
            "num": 11
        }

        ]

Answer 1

这个你可以参考下

vue.js 横向（时间轴、步骤图、流程图）模版_element横向时间线_会点php的前端小渣渣的博客-CSDN博客 效果：

._element横向时间线 https://blog.csdn.net/qq_39523111/article/details/110670569