vue.js+elementUI 列表实现分页 翻页 ，el-pagination组件的使用。

1.简单介绍

slice(start,end) 可以理解为在一个列表中，从第几个（start）开始，到第几个（end）结束

翻页组件：

<div>
      <el-pagination layout="sizes, prev, pager, next" :background="background" :current-page="currentPage" :page-size="pageSize"
        :page-sizes="pageSizes" :total="data.length" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>

      // 翻页方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },

其中所标记的两个属性可以实现实时搜索

 

2.上菜

data.json,记得修改导入的路径。

{"list":[{"dpname":"体育学院","jine":224406.0},{"dpname":"初等教育学院","jine":624990.0},{"dpname":"化学与材料科学学院","jine":389924.0},{"dpname":"国土资源与测绘学院","jine":313304.0},{"dpname":"国际文化与教育学院","jine":152594.0},{"dpname":"地理科学与规划学院","jine":510547.0},{"dpname":"外国语学院","jine":510756.0},{"dpname":"政法学院","jine":712552.0},{"dpname":"教育科学学院","jine":341152.0},{"dpname":"数学与统计科学学院","jine":403398.0},{"dpname":"文学院","jine":698062.0},{"dpname":"新闻传播学院","jine":481496.0},{"dpname":"旅游学院","jine":175120.0},{"dpname":"物流管理与工程学院","jine":387022.0},{"dpname":"物理与电子工程学院","jine":404495.0},{"dpname":"环境与生命科学学院","jine":287556.0},{"dpname":"经济与管理学院","jine":573252.0},{"dpname":"美术设计学院","jine":314571.0},{"dpname":"职业技术教育学院","jine":211062.0},{"dpname":"计算机与信息工程学院","jine":310442.0},{"dpname":"音乐舞蹈学院","jine":198552.0},{"dpname":"马克思主义学院","jine":53960.0}]}

<template>
  <div>
    <h2>用户列表</h2>
    <el-row>
      <el-col :span="6">
        <el-input v-model="keywords" :placeholder="placeholder" :seacrh="seacrhList" @focus="focus" @blur="blur"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button>搜索</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="button" @click="dialogFormVisible = true" class="el-icon-plus">添加用户</el-button>
      </el-col>
    </el-row>
    <div>
      <!-- list.slice(start,end) -->
      <el-table :data="seacrhList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
        <el-table-column label="序号" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>院系: {{ scope.row.dpname }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.$index+1 }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="院系" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>院系: {{ scope.row.dpname }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.dpname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="消费" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>消费金额: ￥{{ scope.row.jine }}.00</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">￥{{ scope.row.jine }}.00</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="open(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination layout="sizes, prev, pager, next" :background="background" :current-page="currentPage" :page-size="pageSize"
        :page-sizes="pageSizes" :total="data.length" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import data from '../../data/data.json'
  export default {
    data() {
      return {
        data: data.list,
        currentPage: 1,
        pageSize: 7,
        pageSizes:[3,5,7,9],
        background: true,
        keywords: '',
        placeholder: '请输入搜索内容'
      }
    },
    computed: {
      seacrhList() {
        return this.data.filter(item => {
          return item.dpname.match(this.keywords)
        })
      },
    },
    methods: {
      // 翻页方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      // 聚焦事件
      focus: function(e) {
        this.placeholder = ""
      },
      //失焦事件
      blur: function(e) {
        this.placeholder = "请输入搜索内容"
      },

      handleEdit(index, row) {
        console.log(index, row);
      },
      // 删除
      handleDelete(index, row) {
        this.data.splice(index, 1)
      },
      // 弹框确定删除
      open(index) {
        this.$confirm('确定删除?', '删除用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.handleDelete(index)

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
  }
</script>

<style>
  .el-input {
    /* width: auto; */
    /* left: -404px; */
    margin-bottom: 1px;
  }

  .el-input>input {
    width: 200px;
  }

  .el-row>.el-col-6 {
    width: auto;
  }
</style>