ant desgin por vue删除最后一页唯一一条数据自动跳转到上一页

最新推荐文章于 2024-05-13 13:54:55 发布

Akil_

最新推荐文章于 2024-05-13 13:54:55 发布

阅读量531

点赞数 3

文章标签： javascript 开发语言 vue.js 前端框架

本文链接：https://blog.csdn.net/Akil_/article/details/128083499

版权

在script里用var先声名三个变量

var nowDatasSize = -1
var currentPage = 1
var pageSize = 10

data中声名分页

data() {
    const pageOnChange =  (current, size) => {
          currentPage = current
          if (size != undefined) {
            pageSize = size
          }
          this.getUserList()//获取列表数据
        }
    const pageSizeChange = (current, size) => {
          currentPage = 1
          if (size != undefined) {
            pageSize = size
          }
          this.getUserList()
        }
    return {
      pagination: {
        hideOnSinglePage: false, // 只有一页时不显示分页
        pageSize: 10,
        total: 200, // 总共有多少条
        onChange: pageOnChange, // 页码变化回调函数
        showQuickJumper: true, // 是否显示快速跳转
        current: 1, // 当前active的页码
        showSizeChanger: true, // 是否显示页面大小变化选择框
        onShowSizeChange: pageSizeChange, //页面大小变化回调函数
        pageSizeOptions: ['5', '10', '20', '50'], // 页面大小变化选择框中可选变化
        showTotal: (total) => {
          return (
            <span>
              共 <span className="pagination">{total}</span> 条
            </span>
          )
        },
      },
}

在查询列表数据方法中添加

if (nowDatasSize != -1 && currentPage > Math.ceil(nowDatasSize / pageSize)) {
        currentPage = Math.ceil(nowDatasSize / pageSize)
      }
      this.pagination.current = currentPage
      this.pagination.pageSize = pageSize

  UserList({ ...value, size: this.pagination.pageSize, pages: this.pagination.current }).then((res) => {
        this.UserLists = res.resultBody.records
        nowDatasSize = Number(res.resultBody.total)
      })

在删除中添加计算

 delUserBtn(record) {
      let that = this
      this.$confirm({
        title: `确认删除${record.name}吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          nowDatasSize = nowDatasSize - that.UserLists.length
          delUser(record.id).then((res) => {
            that.getUserList()
          })
        },
      })
    },

顺带把查询重置功能改了

 searchCrumbs() {
      currentPage = 1
      this.getUserList(this.search)
    },
 resetCrumbs() {
      currentPage = 1
      this.search = {}
      this.getUserList()
    },