vue+element实现分页器效果（带搜索功能）

Posted 2021-12-22 老张在线敲代码

不同数据下分页的效果

<div class="block">
  <span class="demonstration">页数较少时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="50"
    page-size:"100">
  </el-pagination>
</div>
<div class="block">
  <span class="demonstration">大于 7 页时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000"
    page-size:"100">
  </el-pagination>
</div>

以下是组件内的全部代码

<template>
  <div>
    <div class="search">
   // 双向绑定监听input框内输入的内容
      <el-input placeholder="请输入搜索内容" v-model="input_value"></el-input>
      <el-button style="lineHeight:8px">搜索</el-button>
    </div>
    </div>
    //绑定数据对数据处理
        <el-table
          :style="width:'1050px',marginTop:'50px',marginLeft:'20px'"
          stripe
          :default-sort = "prop: 'date', order: 'descending'"
      	  :data="search1.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户联系方式">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="积分变化">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="当前积分">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="备注">
      </el-table-column>
        <el-table-column
        prop="amount4"
        label="操作人">
      </el-table-column>
        <el-table-column
        prop="amount5"
        label="操作时间">
      </el-table-column>
    </el-table>
    <div style="overflow:hidden;marginTop:20px">
      <span style="float:left;line-height:30px;marginRight:100px;marginLeft:200px">第currentPage页 共total/pagesize页，共total条</span>
      <el-pagination
       class="fy"
       layout="prev, pager, next"
       @current-change="current_change"
       :total="total"
       :page-size="pagesize"
       background>
    </el-pagination>
    </div>
      </div>
</template>
<script>
  export default
    data()
      return
         value: new Date(),
         tableData: [
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        , 
          id: '小王',
          name: '15234798569',
          amount1: '-30',
          amount2: '52',
          amount3: "兑换话费",
          amount4: "小王",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-9-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换奖品",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小耿',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-9-21"
        ,
          id: '小霍',
          name: '18434678659',
          amount1: '-80',
          amount2: '12',
          amount3: "兑换话费",
          amount4: "小霍",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换奖品",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小刘',
          name: '18434678659',
          amount1: '-60',
          amount2: '22',
          amount3: "兑换话费",
          amount4: "小刘",
          amount5: "2021-9-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换奖品",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-9-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换奖品",
          amount4: "小张",
          amount5: "2021-9-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-9-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换奖品",
          amount4: "小张",
          amount5: "2021-11-21"
        ,
          id: '小张',
          name: '15234798569',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-9-21"
        ,
          id: '小张',
          name: '18434678659',
          amount1: '-50',
          amount2: '32',
          amount3: "兑换话费",
          amount4: "小张",
          amount5: "2021-11-21"
        ,],
        input_value:"",
        total:21,//默认数据总数
        pagesize:7,//每页的数据条数
        currentPage:1,//默认开始页面
        istag: true,
      
    ,
    //分页
     methods: 
      tableRowClassName( rowIndex) 
        if (rowIndex === 0) 
          return 'th';
        
        return '';
      ,
      switchChange()
          this.istag = !this.istag ;  
      ,

     current_change:function(currentPage)
        this.currentPage = currentPage;
      
    ,
    created:function()
         this.total=this.tableData.length;
      ,
     //查找
    computed: 
        search1() 
          if (this.input_value) 
              console.log("input输入的搜索内容：" + this.input_value)
              return this.tableData.filter(data => 
              console.log("object:" + Object.keys(data))
                  return Object.keys(data).some(key => 
                      return String(data[key]).toLowerCase().indexOf(this.input_value) > -1
                  )
                )
              
              return this.tableData
          
      ,
  
</script>
<style lang="scss">
  .date
    width: 648px;
    height: 343px;
    float: left;
    .el-calendar-table
      .el-calendar-table__row
          .current
              width: 20px;
              height: 20px;
          .el-calendar-day
            width: 10px;
            height: 50px;
            span
            text-align: center;
            
          
        
        .next
          .el-calendar-day
            width: 20px;
            height: 50px;
          
        
        .prev
          .el-calendar-day
            width: 20px;
            height: 50px;
          
        
      
    
    
  
  
  .search
    width: 450px;
    margin-top: 12px;
    float: left;
    display:flex;
    margin-left: 20px;
    input
      width: 290px;
      height: 26px;
      outline: none;
    
    button
      width: 80px;
      height: 30px;
      border: 1px solid rgb(230, 230, 230);
      background: none;
      margin-right: 4px;
    
  
 
</style>