当然最后我们会进行排序后的顺序的保存。这里就不得不说vue的双向绑定了，你对象只要在页面改变位置，在内存地址里的位置顺序也会被改变的，所有我们只需要再次将整个对象回传就行。后台去解析保存，当然这种方式我觉得会很繁琐。比如：我贴个获取数据的代码
/** * 获取排序数据 * * @param merchantId * @return */ public List<SortProductTypeVo> treeSorting(Long merchantId) { //获取所有的连接项 List<ProductTypeRef> typeRefList = productTypeRefService.findAll(); //获取所有的产品 Map<Long, ProductVo> productList = productService.sortFindProduct(merchantId).stream().collect( Collectors.toMap(w -> w.getId(), w -> w)); //最上级父级 List<SortProductTypeVo> parentList = byParentProduct(merchantId, 0); //平均未分类 List<SortProductTypeVo> typeList = byParentProduct(merchantId, 1); // //获取产品类型和产品关联 Map<Long, List<ProductTypeRef>> parentIdChildrenMap = typeRefList.stream().filter(productTypeRef -> productTypeRef.getProductTypeId() != null).collect(Collectors.groupingBy(ProductTypeRef::getProductTypeId)); parentList.forEach(p -> { //筛选第二级菜单 List<SortProductTypeVo> districtsOne = typeList.stream().filter(sortProductTypeVo -> sortProductTypeVo.getParentTypeId().equals(p.getId())).collect(Collectors.toList()); districtsOne.forEach(a -> { //第三层菜单 List<SortProductTypeVo> districtsTwo = typeList.stream().filter(productType -> productType.getParentTypeId().equals(a.getId())).collect(Collectors.toList()); districtsTwo.stream().forEach(d -> { //获取产品和产品类型之间的连接关系 List<ProductTypeRef> l = parentIdChildrenMap.getOrDefault(d.getId(), new ArrayList<>()); //排序产品关联就相当于产品排序 l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq())); //根据排序产品关联去找到产品 d.setProductList(l.stream().map(e -> { ProductVo products = productList.get(e.getProductId()); if (null != products) products.setDisplaySeq(e.getDisplaySeq()); return products; }).collect(Collectors.toList()).stream().filter(s -> s != null).collect(Collectors.toList()));//数组中过滤空的产品 // d.setProductTypeRefs(parentIdChildrenMap.getOrDefault(d.getId(), new ArrayList<>())); }); List<ProductTypeRef> l = parentIdChildrenMap.getOrDefault(a.getId(), new ArrayList<>()); l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq())); a.setProductList(l.stream().map(c -> { ProductVo products = productList.get(c.getProductId()); if (null != products) products.setDisplaySeq(c.getDisplaySeq()); return products; }).collect(Collectors.toList()).stream().filter(s -> s != null).collect(Collectors.toList())); districtsTwo.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq())); a.setProductTypes(districtsTwo); // a.setProductTypeRefs(parentIdChildrenMap.getOrDefault(a.getId(), new ArrayList<>())); }); List<ProductTypeRef> l = parentIdChildrenMap.getOrDefault(p.getId(), new ArrayList<>()); l.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq())); p.setProductList(l.stream().map(a -> { ProductVo products = productList.get(a.getProductId()); if (null != products) products.setDisplaySeq(a.getDisplaySeq()); return products; }).collect(Collectors.toList()).stream().filter(s -> s != null).collect(Collectors.toList())); // p.setProductTypeRefs(parentIdChildrenMap.getOrDefault(p.getId(), new ArrayList<>())); districtsOne.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq())); p.setProductTypes(districtsOne); }); parentList.sort((q, b) -> Integer.compare(q.getDisplaySeq(), b.getDisplaySeq())); return parentList; }
jdk8语法，可能还有需要改进的地方。反正目前来说，功能是实现了。
其实本来想代码一点点讲解的，奈何实在是有事。
关于怎么让3级菜单组件相互拖动，你只需要这里就能找到答案，
加上这个属性就行，理论上。我没试过，因为我懒，hhhh
总结