element ui 分页实现交互

<el-table
  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
  style="width: 100%;margin-bottom: 20px;"
  row-key="id"
  border
  :tree-props="{children: 'refuelingBagCatalog', hasChildren: 'hasChildren'}"
>
  <el-table-column
    prop="createdAt"
    label="创建日期"
    sortable
    width="190"
  />
  <el-table-column
    prop="name"
    label="名称"
    width="180"
  />
  <el-table-column
    prop="bannerUrl"
    label="活动封面"
  >
    <template slot-scope="scope">
      <img :src="scope.row.bannerUrl" min-width="70" height="70">
    </template>
  </el-table-column>
  <el-table-column
    label="操作"
  >
    <template slot-scope="scope">
      <el-button v-if="scope.row.bannerUrl" size="mini" plain @click="addcatalog(scope.row.id)">添加目录
      </el-button>
      <el-button
        v-if="scope.row.bannerUrl"
        type="primary"
        size="mini"
        plain
        @click="Editinformation(scope.row)"
      >编辑
      </el-button>
      <el-button v-if="scope.row.bannerUrl" type="danger" size="mini" plain @click="displayQRCode(scope.row.codeUrl)">二维码
      </el-button>
      <el-button
        v-if="!scope.row.bannerUrl"
        type="primary"
        size="mini"
        plain
        @click="Editincatalog(scope.row)"
      >编辑
      </el-button>
      <el-button
        v-if="!scope.row.bannerUrl"
        type="danger"
        size="mini"
        plain
        @click="deletecatalog(scope.row.id)"
      >删除
      </el-button>
    </template>
  </el-table-column>
</el-table>
<el-pagination
  :current-page.sync="currentPage"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="totals"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
export default {
  data() {
    return {
      loading: true,
      tableData: [], // 表格列表
      currentPage: 1,
      pageSize: 10,
      totals: 0,
    }
  },
  created() {
    this.gettableList()
  },
  methods: {
   // 获取表格列表
    gettableList() {
      this.request.getMan(this.api.tableList, { type: this.selectvalue }).then(res => {
        if (res.code == 1) {
          this.tableData = res.data
          this.totals = res.data.length
          this.loading = false
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
  }
}
————————————————
版权声明：本文为CSDN博主「_xixi_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/assgrsryiy12/article/details/122255215