【vue】流转环节列表的实现问题

1、遇到的问题：一个环节列表的实现问题。这是一个处理工单的系统，当工单流转到某一环节时如下图到合作区热线中心转办环节，就新增了一个列表项。

img

2、尝试：我参考已有系统的html，使用vue框架在本地编写了下面的代码。然后就没有思路了，可能是需要写一些方法。

img

<d-container ref="dContainer51Ref" >
                <d-steps class="d-pt-10" :alignCenter="true" finishStatus="finish" :isBackground="true" ref="dSteps1Ref" >
                    <d-step title="市12345" description="2023/6/5 16:48" contentClassName="" >
                    </d-step>
                    <d-step contentClassName="" >
                    </d-step>
                    <d-step contentClassName="" >
                    </d-step>
                </d-steps>
            </d-container>

3、如果有小伙伴遇到过类似的问题，想请问一下解决的思路~

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7454875
  • 你也可以参考下这篇文章：32.vue中新增和编辑用同一组件情况下，解决两项分别可点击和不可点击问题
  • 除此之外, 这篇博客: Vue路由中的 众所周知，在我们访问页面的时候，会有一些页面不会让我们去访问，比如你去访问支付宝，微博，一系列的平台里，有点页面可以去看，但是有的页面不会让你去看，就比如你没有登录，但是你想看个人主页的信息，那你就进不去，我们需要这样的功能就要用到路由守卫，所以我们得介绍一下路由守卫。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    》》》》》》》》》》

  • 以下回答来自chatgpt:

    我可以提供以下思路：

    1. 在该特定环节，触发一个事件（比如按钮点击事件）来新增一项，并将新增的这一项数据加入到原有的数据列表中；

    2. 在Vue中，可以使用v-if指令来控制是否渲染该新增的这一项，当环节到达特定环节时，v-if的值为true，渲染该新增的这一项，否则v-if的值为false，该新增的这一项就不会被渲染；

    3. 在方法中，使用Vue提供的数据观测机制来监听数据的变化，当新增的这一项数据发生变化时，就执行相关操作，比如将该新增的这一项数据加入到原有的数据列表中；

    4. 如果需要控制用户点击提交保存按钮的次数，在规定时间内只调用一次，可以使用防抖或者节流函数来实现，比如lodash库中提供了debounce和throttle函数。

    下面是具体代码实现：

    1. 在特定环节上添加一个按钮来新增一项：


    ... 新增一项 ...

    1. 使用v-if指令来控制是否渲染该新增的这一项：


    ...
    {{ item.name }}
    确定
    ...

    1. 监听新增这一项数据的变化，将其加入到原有的数据列表中：


    ...
    {{ item.name }}
    确定
    ...

    1. 使用lodash库中提供的debounce函数来控制用户点击提交保存按钮的次数，在规定时间内只调用一次：


    ... 提交保存 ...


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

https://element.eleme.cn/#/zh-CN/component/steps

可以参考这个实现