[JavaScript知识库] elementui 分页器跳转问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> elementui 分页器跳转问题 -> 正文阅读

[JavaScript知识库]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是没有效果的