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>