SOURCE

new Vue({
  el: '#app',
  data: {
    selIndex: -1,
    items: [
      { "id":"1",name: 'Runoob' , selected:false},
      { "id":"1.1",name: 'Google' , selected:false},
      { "id":"1.2",name: 'Taobao' , selected:false},
      { "id":"2",name: 'Taobao' , selected:false},
      { "id":"2.1",name: 'Taobao' , selected:false},
      { "id":"2.2",name: 'Taobao' , selected:false},
      { "id":"2.3",name: 'Taobao' , selected:false}
    ]
  },
  methods:{
      insBefore: function(){
          var newIdx = 0;
          if (this.items.length > 0){
              if(this.selIndex > -1){
                  newIdx = this.selIndex;
              }
              var oldItem = this.items[newIdx];
              var newItem = Object.assign({}, oldItem);
              newItem.name = "新增";
              newItem.selected = false;
              this.items.splice(newIdx, 0, newItem);
              sortId(this.items);
          }else{
             this.items.unshift({ "id":"1",name: '新增' , selected:false}); 
          }
      },
      insAfter: function(){
        if (this.selIndex <0){
              alert("请选择一条记录");
              return
        }
        //找到同级别的下个节点
        level = getLevel(this.items[this.selIndex].id);
        var newIdx = this.items.length;
        for(var i = this.selIndex+1 ; i < this.items.length;i++)
        {
            levelNext = getLevel(this.items[i].id);
            if (levelNext <= level){
                newIdx = i;
                break;
            }
        }
        var oldItem = this.items[this.selIndex];
        var newItem = Object.assign({}, oldItem);
        newItem.name = "新增";
        newItem.selected = false;
        this.items.splice(newIdx, 0, newItem);
        sortId(this.items);

      },
      insSubLevel: function(){
        if (this.selIndex <0){
            alert("请选择一条记录");
            return
        }
        //找到下个级别的节点
        var level = getLevel(this.items[this.selIndex].id);
        var newIdx = this.items.length;
        for(var i = this.selIndex+1 ; i < this.items.length;i++)
        {
            levelNext = getLevel(this.items[i].id);
            if (levelNext <= level){
                newIdx = i;
                break;
            }
        }
        var oldItem = this.items[this.selIndex];
        var newItem = Object.assign({}, oldItem);
        //理论上只要算下这个就可以了，可以不用重排
        newItem.id = oldItem.id + ".1";
        newItem.name = "新增";
        newItem.selected = false;
        this.items.splice(newIdx, 0, newItem);
        sortId(this.items);
      },
      downLevel: function(){
        if (this.selIndex <0){
              alert("请选择一条记录");
              return
        }
        if (this.selIndex < 1){
            alert("第一个节点不可降级");
            return;
        }
        var levelPrex = getLevel(this.items[this.selIndex-1].id);
        var level = getLevel(this.items[this.selIndex].id);
        if (levelPrex < level){
            alert("第一个节点不可降级");
            return;
        }

        this.items[this.selIndex].id = this.items[this.selIndex].id  + ".1";
        sortId(this.items);
      },
      upLevel: function(){
        if (this.selIndex <0){
              alert("请选择一条记录");
              return
        }
        var id = this.items[this.selIndex].id;
        var level = getLevel(id);
        if (level == 1){
            alert("已经最顶层了");
            return
        }
        var arr = id.split(".");
        arr.pop();
        this.items[this.selIndex].id = arr.join(".");
        sortId(this.items);
      },
      delItem: function(){
          if (this.selIndex <0){
              alert("请选择一条记录");
              return
          }
          if (confirm("确认删除该记录？将同时删除子记录"))
          {
            delSub(this.items, this.selIndex);
            this.items.splice(this.selIndex, 1);
            this.selIndex = -1;
            sortId(this.items);
          }
      },
       selItem: function(id){
           for(var i = 0; i < this.items.length; i++) {
              if (this.items[i].id == id){
                  this.selIndex = i;
                  this.items[i].selected = true;
              }else{
                 this.items[i].selected = false;
              }
          }
      },
      //获取序号
      getIndexById: function(id){
          for(var i = 0; i < this.items.length; i++) {
              if (this.items[i].id == id){
                  return i;
              }
          }
          return -1;
      }
  }
});

//删除子节点
function delSub(items,idx){
    var id = items[idx].id + ".";
    var size = 0;
    for(var i = idx+1; i < items.length; i++) {
        if (items[i].id.startsWith(id)){
            size += 1;
        }else{
            break;
        }
    }
    if (size > 0)
    {
      items.splice(idx+1,size);
    }
}

//ID重排，
function sortId(items)
{
    var levelMap = {}
    var lastLevel = 1;
    for (var i = 0; i < items.length; i++)
    {
        var id = items[i].id;
        var level = getLevel(id);
        var levelConf = levelMap[level];
        if (!levelConf || level > lastLevel){
            levelConf = {
                preid: level > 1? levelMap[level-1].preid + levelMap[level-1].idx  + "." : "",
                idx: 1
            }
            levelMap[level] = levelConf;
        }else{
            levelConf.idx = levelConf.idx + 1;
        }
        //!id.startsWith(levelConf.preid)
        items[i].id = levelConf.preid + levelConf.idx;
        lastLevel = level;
    }
}
//获取级别
function getLevel(id){
    return id.split('.').length;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表根据ID自动排序</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="insBefore">插入前面</button><button @click="insAfter">插入后面</button><button @click="insSubLevel">插入子级</button>
    <button @click="downLevel">降级</button><button @click="upLevel">升级</button>
    <button @click="delItem">删除</button>
  <ul>
    <li v-for="item in items" @click="selItem(item.id)" :class="item.selected?'red':''">
      {{ item.id }}--{{ item.name }}
    </li>
  </ul>
</div>

<script>

</script>
</body>
</html>

.red{
    color: red
}