elementui 分页器跳转问题

  deleteTradMark(row, $index) {
      this.$confirm(`确定删除${row.tmName}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$API.trademark.deleteTradMark(row.id);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // console.log($index);
            // this.list.splice($index, 1);
            // this.getPageList(this.list.length > 0 ? this.page : --this.page);
            this.getPageList(this.list.length > 0 ? this.page : this.page - 1);
            console.log(
              "删除成功",
              "list:",
              this.list,
              "条数:",
              this.list.length,
              "页数:",
              this.page
            );
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

关键代码 this.getPageList(this.list.length > 0 ? this.page : this.page - 1);

这是修复之前的代码和效果图，可以看出点击删除后页面没有进行跳转

理论上通过判断list长度从而控制页数的减少是没有问题的，但是为什么这种写法没效果我也不清楚，于是换了种思路

通过插槽将列表索引传递过去

     <el-table-column label="操作" width="width" align="center">
        <!-- slot-scope="{ row, $index }" -->
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="editTrademark(row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="deleteTradMark(row, $index)"
            >删除</el-button
          >
        </template>
      </el-table-column>

然后再删除成功后请求上一页数据时，将list的长度通过插槽传过来的索引删除一条数据，然后使用自减的方法进行页数的减少就可以辣

 deleteTradMark(row, $index) {
      this.$confirm(`确定删除${row.tmName}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$API.trademark.deleteTradMark(row.id);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            console.log($index);
            this.list.splice($index, 1);
            this.getPageList(this.list.length > 0 ? this.page : --this.page);
            console.log(
              "删除成功",
              "list:",
              this.list,
              "条数:",
              this.list.length,
              "页数:",
              this.page
            );
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

！！！！注意，此处如果使用-1是没有效果的

this.getPageList(this.list.length > 0 ? this.page : this.page-1); ！！！无效

this.getPageList(this.list.length > 0 ? this.page : --this.page); ！！！有效

csdn文章推荐受影响解决办法10个字10行

elementui 分页器跳转问题

猜你喜欢