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

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>

  

posted @ 2020-02-24 18:10  hongzi826  阅读(706)  评论(0编辑  收藏  举报