Vue 多层级目录拖动排序

本示例基于Vue.Draggable中Nested示例，git地址：https://github.com/SortableJS/Vue.Draggable

需求描述

基于多表头列表的一种后台设置：

1.列字段可以拖进表头目录中(文件与文件夹的关系)

2.可修改表头目录名称

3.可删除表头目录(删除后目录内部的列重排)

效果图如下:

设置完成后在前台列表的展示:

代码

1.nested-main.vue

2.nested-draggable.vue

3.关于取值

每个文件夹最后都有一个冗余的对象{name: '',type: 0,emptyHolder:true,tasks: []}

我们可以通过emptyHolder:true属性来进行过滤。

以下是递归的一种实现方式:

 var f = item => {
    if (item['Children'] && item['Children'].length > 0) {
        item['Children'] = item['Children'].filter(f);
        return true;
    } else if (item.Type == 0 && item.emptyHolder) {
        return false;
    } else {
        return true;
    }
};
const filterNestedProperty = this.nestedProperty.filter(f);

效果图