el-mentUI的分页如何插入el-input

Posted 2021-03-07 hongyungo

1、el-mentui的分页组件中添加pagesize和layout属性中将size替换成slot,然后写入自己想要实现的东西

2、我这里使用el-input-num组件，当输入的值改变时触发chang事件，把pagesize动态改变。

 <el-pagination
          ref="viewpagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchMessage.currentPage"
          :page-size="searchMessage.pageSize"
          layout="total, slot, prev, pager, next, jumper"
          :total="pageTableData[‘dataTotal‘]"
        >
           <el-input-number class="" size="mini" :min="1" :max="1000" :controls="false"
          placeholder="请输入多少条/页"
          @change="changesize"
          v-model="searchMessage.pageSize">
          </el-input-number>
 </el-pagination>
<script>
  changesize(val){
      if(val==undefined){
        this.$nextTick(()=>{
          this.searchMessage.pageSize=1;
        })
      }else{
        this.searchMessage.pageSize = val;
      }
      this.initTable();
     // this.$refs.viewpagination.pageSize=val;
      //console.log(this.$refs.pagination);
    },  
</script>