vue+element 封装 el-table和el-pagation

通常项目里很多组件是可以公用的，这里使用el-table和el-pagation做示例进行了封装。
分三个模块
1.el-pagation组件。2.el-table组件。3.使用组件的页面
直接上代码
分页器的

<template>
 <div class="block" style="background:white;position:absolute;bottom:20px;right:20px;">
            <el-pagination align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.parameTotal.currentPage" :page-sizes="this.parameTotal.pageSizes" :page-size="this.parameTotal.pageSize" layout="prev, pager, next, jumper, slot, total, sizes" :total="this.parameTotal.total">
            </el-pagination>
        </div>
</template>
<script>
export default {
      props:{
      parameTotal:{
      },
  },
  data () {
    return {
        currentPage: '', 
        pageSize: this.parameTotal.pageSize, //初始化pagesize
    }
  },
 mounted() {
     console.log(99)
    },
  computed:{
  },
  methods:{
      //分页方法
      handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.$emit('dataChange',{
                currentPage:this.currentPage,
                pageSize:val,
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.$emit('dataChange',{
                currentPage:val,
                pageSize:this.pageSize,
            })
           
        },
  }
}
</script>
<style>
 
</style>

el-table的

<template>
 <div>
     <el-table
    border
    :data="tabledata.tableDataone"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    highlight-current-row
    tooltip-effect="dark"
    :row-class-name="tableRowClassName"
    :height='tabledata.height'
    :style="tabledata.style"
    >
    <el-table-column
      type="selection"
      align="center"
      width='50'
      >
      </el-table-column>
      <el-table-column
      label="序号"
      align="center"
      width="55"
      type='index'
      > 
    </el-table-column>
    <el-table-column
     v-for=" item in tabledata.col"
     :key='item.title'
      :prop="item.name"
      align="center"
      :label="item.title"
      :min-width="item.width">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      min-width="18%">
      <template slot-scope="scope">
        <el-button @click=""  size="small"><span>操作一</span></el-button>
        <el-button @click=""  size="small" ><span>操作二</span></el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
export default {
      props:{
      parameTable:{
       
      },

  },
  data () {
    return {
      tabledata:this.parameTable
        
    }
  },
  created(){
     
  },
 mounted() {
   console.log(77)
    },
  computed:{
  },
  methods:{
    //绑定偶数行样式（所有加此class名的表格通用）
      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 != 0) {
          return 'even-row';
        }
        return '';
      },
     
  }
}
</script>
<style>
 
</style>

运用页面

<template>
  <div class="jichu_table" style="width:100%;height:calc(100% - 36px)">
    <template>
      <!-- 表格一 -->
      <mytable :parameTable="commontable"></mytable>

      <!-- 分页器一 -->
      <pagation style="bottom:400px" :parameTotal="parameterone" @dataChange="datachangeone"></pagation>
      <!-- 表格二 -->

      <mytable :parameTable="commontable2"></mytable>
      <!-- 分页器二 -->
      <pagation :parameTotal="parametertwo" @dataChange="datachangeone2"></pagation>
    </template>
  </div>
</template>
<script>
import pagation from "../../components/common/pagation";
import mytable from "../../components/common/Table";

export default {
  components: { pagation, mytable },
  data() {
    return {
      //表格一

      commontable: {
        style: { margin: "0px 0px 100px 0px" },
        tableData: [],
        tableDataone: [],
        height: "300px",
        col: [
          {
            name: "cs",
            title: "测试一",
            width: "20%",
          },
          {
            name: "css",
            title: "测试一一",
            width: "20%",
          },
        ],
      },
      //配置分页器一的参数
      parameterone: {
        currentPage: 1, //配置初始化当前页
        total: 0,
        pageSize: 10, //配置当页展示数据条数
        pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300], //配置页面可调整条数
      },
      //表格二
      commontable2: {
        style: { margin: "0px 0px 0px 0px" },

        tableData: [],
        tableDataone: [],
        height: "250px",
        col: [
          {
            name: "cs",
            title: "测试二",
            width: "30%",
          },
          {
            name: "cs2",
            title: "测试二二",
            width: "30%",
          },
        ],
      },

      //配置分页器二的参数
      parametertwo: {
        currentPage: 2, //配置初始化当前页
        total: 0,
        pageSize: 20, //配置当页展示数据条数
        pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90], //配置页面可调整条数
      },
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {
    //表格一
    this.commontable.tableData = [
      { cs: 111, css: 3333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
      { cs: 111, css: 333 },
    ];
    this.datachangeone(this.parameterone);
    this.parameterone.total = this.commontable.tableData.length;
    //表格二
    this.commontable2.tableData = [
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
      { cs: 222, cs2: 4444 },
    ];
    this.datachangeone2(this.parametertwo);
    this.parametertwo.total = this.commontable2.tableData.length;
  },
  mounted() {},
  methods: {
    //表格一分页器事件
    datachangeone(val) {
      this.commontable.tableDataone = this.commontable.tableData.slice(
        (val.currentPage - 1) * val.pageSize,
        val.currentPage * val.pageSize
      );
    },
    //表格二分页器事件

    datachangeone2(val) {
      this.commontable2.tableDataone = this.commontable2.tableData.slice(
        (val.currentPage - 1) * val.pageSize,
        val.currentPage * val.pageSize
      );
    },
  },
};
</script>
<style scoped lang="scss">
.el-button {
  color: #01aaed;
  border: none;
  background: transparent;
}
.el-button:hover {
  background-color: transparent;
}
</style>

效果图

目录结构，这里只需关注pagation.vue Table.vue BasicDataList.vue