vue+element实现table+分页

最新推荐文章于 2024-08-01 17:00:44 发布

GXJ_128

最新推荐文章于 2024-08-01 17:00:44 发布

阅读量992

点赞数

文章标签： vue elementui

本文链接：https://blog.csdn.net/m0_49423813/article/details/111934681

版权

1. template分页

在这里插入图片描述

<el-pagination
  :page-size="fileListForm.pageSize"
  :current-page="fileListForm.pageNum"
  :page-sizes="[10, 50, 100, 200, 300, 500, 1000]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="fileListForm.total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>

2.data定义

fileListForm: {
  fileOldName: '', // 按照name查询
  pageSize: 10, // 每页多少条
  pageNum: 1, // 默认第一页
  total: 0, // 总条数
},

3. 点击下一页和改变每页的条数

在这里插入图片描述

	// 点击下一页
    handleCurrentChange(currentPage) {
      this.fileListForm.pageNum = currentPage;
      this.getUploadFile();
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.fileListForm.pageSize = val;
      this.fileListForm.pageNum = 1;
      this.getUploadFile();
    },

4.默认列表查询

在这里插入图片描述

// 默认列表
    async getUploadFile() {
      const uploadObj = await uploadHomeDownloadFile(this.fileListForm);
      if (uploadObj.code === 0) {
        this.fileListForm.total = uploadObj.data.count;
        this.uploadFileList = uploadObj.data.list;
        this.indicatorLoading = false;
      }
    },

5.根据name来搜索（点击搜索按钮）

在这里插入图片描述

此时页数应变为默认第一页且总条数为0

// 搜索
   async searchUploadFile() {
      this.fileListForm.pageNum = 1;
      this.fileListForm.total = 0;
      this.indicatorLoading = true;
      const uploadObj = await uploadHomeDownloadFile(this.fileListForm);
      if (uploadObj.code === 0) {
        this.fileListForm.total = uploadObj.data.count;
        this.uploadFileList = uploadObj.data.list;
        this.indicatorLoading = false;
      }
    },

6.重置（刷新）查询条件清空且重新加载列表

在这里插入图片描述

// 刷新--重置
    resetUploadFile() {
      this.indicatorLoading = true;
      this.fileListForm = {
        fileOldName: '',
        pageSize: this.fileListForm.pageSize,
        pageNum: 1,
        total: 0,
      };
      this.getUploadFile();
    },

7.删除文件或table某一行

在这里插入图片描述
表格某一行传值scope.row 即deleteFile(scope.row.id)

// 删除文件
    deleteFile(id) {
      this.$confirm('是否删除该文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const resultObj = await deleteUploadDownload(id);
        if (resultObj.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getUploadFile();
        }
      });
    },