vue v-for循环拖拽排序,实现数组选中的数据拖拽后对应的子数据也进行重新排序

如下图所有,有个需求更新, 实现拖拽。
1,当新增了测点类型的时候每个对应的回路子数据都会新增对应的测点类型。
2,当拖动测点类型结束的时候对应的回路里面的内容也会跟着测点类型的排序自动排序
vue v-for循环拖拽排序,实现数组选中的数据拖拽后对应的子数据也进行重新排序_第1张图片

vue v-for循环拖拽排序,实现数组选中的数据拖拽后对应的子数据也进行重新排序_第2张图片

其实很简单,只要会了拖拽,然后再定的数据处理里面加上对应的处理逻辑就好了。
我这边直接展示代码了。

	template>
	  
{{ dataInfos.title.value }}
电网电压 {{ dataInfos?.networkVoltageInfo?.value }} v
回路{{ i+1 }}
{{ item.label }}
{{ item2.value | isNull }}{{ item2.unit }}
{{ item.label }} {{ item.label }}
回路
  • 添加回路
添加测点类型
{{ item.label }}
{{ item2.type }}
初始值 转换值
添加转换值

vue v-for循环拖拽排序,实现数组选中的数据拖拽后对应的子数据也进行重新排序_第3张图片
保存后的图例对比

你可能感兴趣的:(vue.js,javascript,前端)