elemet-paging

Posted 2021-01-15 huanhuan55

<template>
    <card-layout :title="L(‘Prosuct‘)" :actions="actions" @click="handleClick">
        <el-table :data="tableData4.slice((currentPage-1) * pagesize,currentPage*pagesize)" style="width: 100%" max-height="250">
            <el-table-column fixed prop="date" label="日期" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="province" label="省份" width="120">
            </el-table-column>
            <el-table-column prop="city" label="市区" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="邮编" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData4)" size="small">
                        移除
                    </el-button>
                    <el-button type="primary" size="small">
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData4.length">
        </el-pagination>
    </card-layout>
</template>

<script>
export default {
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  },
  data() {
    return {
      tableData4: [
      ],
      actions: [
        [
          {
            id: "New",
            type: "primary",
            text: "New",
            icon: "el-icon-circle-plus-outline"
          },
          {
            id: "Refresh",
            type: "success",
            text: "Refresh",
            icon: "fa fa-refresh"
          }
        ]
      ],
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
    };
  },
  methods: {
    handleClick(id) {
      switch (id) {
        case "New":
          this.AddProduct();
          break;
        case "Refresh":
          this.Refresh();
          break;
        default:
          break;
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    AddProduct() {
      console.log("add");
    },
    Refresh() {
      console.log("refresh");
    },
    handleSizeChange(size) {
       this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
       this.currentPage = currentPage;
    }
  }
};
</script>