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

Question

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

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

<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、如果有小伙伴遇到过类似的问题，想请问一下解决的思路~

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: 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. 在特定环节上添加一个按钮来新增一项：

  
  

  ...
      新增一项
      ...

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

  
  

  ...

  {{ item.name }}

  确定

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

  
  

  ...

  {{ item.name }}

  确定

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

  
  

  ...
      提交保存
      ...

  <script></script>

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