封装一个element分页 结合混入机制

两个文件 一个tablePaging.vue 一个混入得tablePagingMixin.js

最下面会上文件

如何使用

如何使用

1.引入组件

components: {
    tablePaging:resolve=>require(['../../tablePaging/tablePaging'],resolve),
},

2.混入js

import {tablePagingMixin} from '../../tablePaging/tablePagingMixin'
export default {
    mixins:[tablePagingMixin],
}

3.模板使用 pageBox,lookPageSize,lookCurPage 都写在混入得Js里面了 个别需要特殊处理得在各自组件重写方法和值去处理

<tablePaging  :pageBox="pageBox"  @pageSize="lookPageSize" @curPage="lookCurPage" v-if="pageBox.length!=0"></tablePaging>

注意

1.在被使用得组件中列表得方法名需为getData()

getData(num){   //num 用来计算序号 在各自组件中使用不用传num 涉及到序号就需要传
    this.api.login.accountList({pageNo:this.page,pageSize:this.size},res=>{
        this.tableData = res.list;
        
        <!-- 这个是处理分页  和  序号得  -->
        this.pageBox = [res.total, this.size];
        // 处理序号
        if(num==-1){
            this.firstNum=0;
        }else if(num && num>0){
            this.firstNum=num*this.size;
        }else{
            this.firstNum=0;
        }
    })
}

2.序号展示

<el-table-column
prop="#"
label="序号"
width="50"
align="center">
    <template slot-scope="scope">
        <span>{{firstNum+scope.$index+1}}</span>
    </template>
</el-table-column>

Props

参数说明

属性	类型	参数说明	参数	默认值
pageBox	Array	2个数得数组	pageBox[0]：总数量 pageBox[1]：每页数	[]
page	Number	页数（可以在混入得js中设置默认值）		10
size	Number	个数（可以在混入得js中设置默认值）		1
curPage	Number	设置当前页（建议页面第一次加载得时候用，后面都用v-if pageBox得长度去做）	1	1
message	String	左侧得文案	“”	“”
*firstNum	Number	序号（在混入得js中声明了，直接在列表中用）		0

方法val

属性	类型	参数说明	参数	默认值
pageSize	function	重置每页得数量，返回得每页数量	val
curPage	function	点击翻页，返回得是当前页	val

下面是两个文件得代码 直接使用
tablePaging.vue

 <template>
<div id="table_paging">
  <span class="c6 lt es1" style="margin-top: 6px;" v-html="message"></span>
  <el-pagination
      :background="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[5,10,15, 20, 40,200]"
      :page-size="pageBox[1]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageBox[0]"
      :pager-count="pagerCount"
      >
    </el-pagination>
</div>
</template>

<script>
export default {
  props:{
    'pageBox':{
      type:Array,
      default:[],
    },
    'curPage':{
      type:Number,
      default:1,
    },
    'message':{
      type:String,
      default:""
    }
  },
  methods: {
      handleSizeChange(val) {
        this.$emit('pageSize',val)
      },
      handleCurrentChange(val) {
        this.$emit('curPage',val)
      }
    },
    data() {
      return {
        currentPage4: 1,
        pagerCount:5,
      };
    },
    created(){
    },
    watch:{
      
    }
};
</script>

<style lang="scss" scoped>
  #table_paging{
    text-align: right;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .notice{
      line-height: 40px;
    }
    .flexBlank{
      flex-grow: 1;
    }
  }
</style>

tablePagingMixin.js

export const tablePagingMixin={
  data(){
    return{
        page: 1,
        size: 10,
        pageBox: [],
        firstNum:0, //序号
    }
  },
  methods: {
    lookPageSize(val) {
      console.log(val)
        this.size = val
        this.page = 1
        this.pageBox = [];
        this.getData(-1)
    },
    lookCurPage(val) {
        if(val){
          this.page = val
        }else{
          this.page=1;
        }
        // this.firstNum=(val-1)*this.size;
        this.getData(val-1)
    },
  }
}