黑马Vue电商后台项目的一些优化

优化一：删除自动跳转到上一页

优化前：删除最后一页最后一条数据时，无法自动跳转到上一页

优化后：可以自动跳转到上一页

优化二：保留当前页

优化前：每次刷新都会重置当前页，以及当前页显示的条数

优化后：刷新时停留在当前页，不会跳转到第一页，且每页的显示条数会保留

优化三：数据处理

需求点击叉号：后台删除数据，前台将点击的方框移除
解决：为了防止已经打开的展开行闭合，同时又要将删除的标签从展开行中移除，所以需要需改已经被vue监控的数据，案例中是将判断哪个标签被删除的数据处理交给后台，我将这个数据处理，直接在js中处理，实现相同效果

判断3层数据中的哪个标签被删除的代码

 // 根据传递过来的id进行遍历，将要删除的数据剔除
    updateRoleRightList(arr, rightId) {
      // arr是一个数组，数组中是一个一个对象
      // 遍历数组
      let item1 = arr;
      for (let i = 0; i < item1.length; i++) {
        // 第一层中查找
        if (item1[i].id == rightId) {
          return item1.splice(i, 1);
        }

        // 第二层中查找
        let item2 = arr[i].children;
        for (let j = 0; j < item2.length; j++) {
          if (item2[j].id == rightId) {
            return item2.splice(j, 1);
          }

          // 在第三层中寻找
          let item3 = arr[i].children[j];
          for (let k = 0; k < item3.children.length; k++) {
            if (item3.children[k].id == rightId) {
              return item3.children.splice(k, 1);
            }
          }
        }
      }
    },

优化四：vxe-table渲染表格以及分页

优化五：使用sortable.js实现拖动

优化六：将vue-table-with-tree-grid插件替换为vxetable自带的树桩表格

优化前：卡顿

优化后：