vue el-pagination分页

方法一：

html:

 <!-- 列表 -->

            <el-table

              :data="

                dataList.slice(

                  (currentPage - 1) * pageSize,

                  currentPage * pageSize

                )

              "

            >

              <el-table-column prop="address" :label="this.LANG.test1.desc34">

              </el-table-column>

              <el-table-column prop="type" :label="this.LANG.test1.desc40">

              </el-table-column>

              <el-table-column prop="num" :label="this.LANG.test1.desc41">

              </el-table-column>

              <el-table-column

                prop="space,usdt"

                :label="this.LANG.test1.desc42"

              >

                <template slot-scope="scope">

                  {{ scope.row.space }}<br />{{ scope.row.usdt }}

                </template>

              </el-table-column>

            </el-table>

            <div class="block">

              <el-pagination

                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

                :current-page="currentPage"

                :page-sizes="[5, 10]"

                :page-size="pageSize"

                layout="total, sizes, prev, pager, next, jumper"

                :total="dataList.length"

              >

              </el-pagination>

            </div>

 

js:

 data() {

    return {

      dataList: [],

      num: null,

      space: null,

      type: null,

      usdt: null,

      pageSize: 10,

      currentPage: 1,

      creTime: null,

      address: null,

    };

  },

  mounted() {

    this.GEOMNum();

  },

  methods: {

    GEOMNum: function (index) {

      this.$axios

        .get("bkt", {

          params: {

            currentPage: this.currentPage,

            creTime: this.creTime,

            address: this.address,

          },

        })

        .then((res) => {

          console.log(res);

          if (res.code == 0) {

            this.dataList = res.data.dataList;

            console.log(this.dataList);

            this.dataList.length = res.data.dataList.length;

            console.log(this.dataList.length);

          }

        });

    },

    time() {

      this.GEOMNum();

    },

    // 单页条数改变的时候发生

    handleSizeChange(pageSize) {

      console.log(`每页 ${pageSize} 条`);

      this.pageSize = pageSize;

    },

    // 页码改变的时候发生

    handleCurrentChange(currentPage) {

      console.log(`当前页: ${currentPage}`);

      this.currentPage = currentPage;

    },

 

 

方法二：

html:

  <!-- 列表 -->

            <el-table :data="dataList">

              <el-table-column prop="address" :label="this.LANG.test1.desc34">

              </el-table-column>

              <el-table-column prop="type" :label="this.LANG.test1.desc40">

              </el-table-column>

              <el-table-column prop="num" :label="this.LANG.test1.desc41">

              </el-table-column>

              <el-table-column

                prop="space,usdt"

                :label="this.LANG.test1.desc42"

              >

                <template slot-scope="scope">

                  {{ scope.row.space }}<br />{{ scope.row.usdt }}

                </template>

              </el-table-column>

            </el-table>

            <div class="block">

              <el-pagination

                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

                :current-page="currentPage"

                :page-sizes="[10]"

                :page-size="pageSize"

                layout="total, sizes, prev, pager, next, jumper"

                :total="total"

              >

              </el-pagination>

            </div>

 

js:

 data() {

    return {

      dataList: [],

      num: null,

      space: null,

      type: null,

      usdt: null,

      pageSize: 10,

      currentPage: 1,

      creTime: null,

      address: null,

      totalPage: 1,

      total: 1,

    };

  },

  mounted() {

    this.GEOMNum();

  },

  methods: {

    GEOMNum: function (index) {

      this.$axios

        .get("bkt", {

          params: {

            currentPage: this.currentPage,

            creTime: this.creTime,

            address: this.address,

            pageSize: this.pageSize,

          },

        })

        .then((res) => {

          console.log(res);

          if (res.code == 0) {

            this.dataList = res.data.dataList;

            this.totalPage = res.data.totalPage;

            this.currentPage = res.data.currentPage;

            this.pageSize = res.data.pageSize;

            this.total = res.data.total;

            console.log(this.totalPage);

            console.log(this.currentPage);

            console.log(this.pageSize);

            console.log(this.total);

          }

        });

    },

    time() {

      this.GEOMNum();

    },

    // 单页条数改变的时候发生

    handleSizeChange(val) {

      console.log(`每页 ${val} 条`);

      this.pageSize = val;

      this.GEOMNum();

    },

    // 页码改变的时候发生

    handleCurrentChange(currentPage) {

      console.log(`当前页: ${currentPage}`);

      this.currentPage = currentPage;

      this.GEOMNum();

    },