vue+element-ui后台管理系统，关于el-table操作行的上移，下移，前插，后插，假删除。

项目中需要这些花里胡哨的操作，在度娘上找了好久，然后再根据自己项目总结如下


在data中定义operateSelect数组operateSelectIndex变量

上移

 // 操作内容上移
    caomoveUp() {
      const that = this;
      if (this.operateSelect.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择一项"
        });
      } else if (this.operateSelect.length > 1) {
        this.$message({
          type: "warning",
          message: "只能选择一项"
        });
        return;
      } else if (this.operateSelect.length > 0) {
        if (that.operateSelectIndex > 0) {
          const upDate = that.tableDatareset[that.operateSelectIndex - 1];
          that.tableDatareset.splice(that.operateSelectIndex - 1, 1);
          that.tableDatareset.splice(that.operateSelectIndex, 0, upDate);
          that.operateSelectIndex--;
          that.operateSelectIndex = that.operateSelectIndex--;
          // console.log("操作内容上移后索引===", that.operateSelectIndex)
        } else {
          this.$message({
            type: "warning",
            message: "已经是第一项"
          });
        }
      }
    },

下移

    // 操作内容下移
    caomoveDown() {
      const that = this;
      if (this.operateSelect.length === 0) {
        this.$message({
          type: "warning",
          message: "请先至少选择一项"
        });
      } else if (this.operateSelect.length > 1) {
        this.$message({
          type: "warning",
          message: "只能选择一项"
        });
        return;
      } else if (this.operateSelect.length > 0) {
        if (that.operateSelectIndex + 1 === that.tableDatareset.length) {
          this.$message({
            type: "warning",
            message: "已经是最后一项"
          });
        } else {
          const downDate = that.tableDatareset[that.operateSelectIndex + 1];
          that.tableDatareset.splice(that.operateSelectIndex + 1, 1);
          that.tableDatareset.splice(that.operateSelectIndex, 0, downDate);
          that.operateSelectIndex++;
          that.operateSelectIndex = that.operateSelectIndex++;
        }
      }
    },

前插

这里定义的insert是行所需的字段名

    // 操作内容前插
    operateInsertBefore() {
      if (this.operateSelect.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择一项"
        });
      } else if (this.operateSelect.length > 1) {
        this.$message({
          type: "warning",
          message: "只能选择一项"
        });
        return;
      } else {
        this.operateSelectIndex++;
        this.operateSelectIndex = this.operateSelectIndex++;
        const insert = {
          hang: "",
          operts: "",
          pltxt1: "",
          status1: ""
        };
        this.tableDatareset.splice(this.operateSelectIndex - 1, 0, insert);
      }
    },

后插

这里定义的insert是行所需的字段名

    // 操作内容后插
    operateInsertAfter() {
      if (this.operateSelect.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择一项"
        });
      } else if (this.operateSelect.length > 1) {
        this.$message({
          type: "warning",
          message: "只能选择一项"
        });
        return;
      } else {
        const insert = {
          hang: "",
          operts: "",
          pltxt1: "",
          status1: ""
        };
        this.tableDatareset.splice(this.operateSelectIndex + 1, 0, insert);
      }
    },

删除

    // 操作内容选中删除
    delOperate() {
      for (let i = 0; i < this.tableDatareset.length; i++) {
        const element = this.tableDatareset[i];
        element.id = i;
      }
      if (this.operateSelect.length === 0) {
        this.$message.error("请选择一项");
      }
      this.operateSelect.forEach(element => {
        this.tableDatareset.forEach((e, i) => {
          if (element.id === e.id) {
            this.tableDatareset.splice(i, 1);
          }
        });
      });
    },

以上内容均是前端页面的假动作。