基于element table二次封装

直接上代码
// 父组件

<!-- MyTable组件 -->
<template>
  <div class="myTable">
    <el-table
      :data="tableData"
      :border="page.isBorder"
      :stripe="page.isStripe"
      style="width: 100%"
      ref="multipleTable"
      tooltip-effect="dark"
      @selection-change="SelectionChange"
    >
      <el-table-column v-if="page.isMutiSelect" type="selection" style="width: 55px">
      </el-table-column>
      <el-table-column
        v-for="(item, i) in tableTitle"
        :key="i"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :max-height="item.height"
        :align="item.align"
      >
        <template slot-scope="scope">

          <template v-if="!item.render">
  
            <template v-if="item.formatter">
              <span v-html="item.formatter(scope.row, item)"></span>
            </template>

            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>

        </template>
      </el-table-column>
      <slot name="handleColumn"></slot>
    </el-table>

    <el-pagination
      class="page_sty"
      style="text-align: right"
      background
      @size-change="getSize"
      hide-on-single-page
      @current-change="getCurChange"
      :page-size.sync="page.pageSize"
      :page-sizes="page.pageSizesArr"
      :current-page.sync="page.pageNum"
      layout="total, sizes, prev, pager, next,jumper"
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'myTable',

  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表格配置项
    tableTitle: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 页码 每页条数 总数
    page: {
      type: Object,
      default: function () {
        return {
          pageNum: 1, // 分页-当前页
          pageSize: 10,
          total: 0,
          // 是否有边框 默认true
          isBorder: true,
          // 是否隔行换色 默认true
          isStripe: true,
          // 每页条数
          pageSizesArr: [5, 10, 20, 50, 100],
          // 是否多选
          isMutiSelect: false
        }
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    SelectionChange(val) {
      //多行选中，暂时没用上
      console.log(val, 'ppo')
    },
    // 修改每页条数
    getSize(val) {
      this.$set(this.page, 'pageNum', 1)
      this.$emit('getPageTable', this.page.pageNum, val)
    },
    // 翻页
    getCurChange(val) {
      this.$emit('getPageTable', val, this.page.pageSize)
    }
  }
}
</script>
<style  scoped>
.page_sty {
  margin: 10px auto 0;
  text-align: center;
}
</style>

子组件

<template>
    <myTable
      :tableTitle="tableTitle"
      :tableData="tableData"
      :page="pages"
      @getPageTable="getTable"
      @getSize="getTable"
      v-loading="loadingTab"
    >
          <div slot="handleColumn">
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button @click="seeFun(scope.row)" type="primary" round size="mini"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </div>
    </myTable>
</template>
  
  <script>
import { videosList } from '@/request/api/videoPublishing/home'
import myTable from '@/components/myTable.vue'


export default {
  components: {
    //声明子组件
    myTable
  },
  props: {
    // 使用props接收参数
    dialogVisible: Boolean,
    dataPageId: Number
  },

  data() {
    return {
      // 加载
      loadingTab: false,

      // 表格配置项
      tableTitle: [
        //表头数据w
        { label: '序号', prop: 'index', width: '100px',align:'center'  },
        { label: 'id', prop: 'id',align:'center'  },

        {
          label: '是否完成',
          prop: 'isComplete',
          align:'center',
          formatter: (row, column) => {
            return row.isComplete== 1 ? '是' : '否'
          }
        },
        { label: '完成时间', prop: 'time',align:'center'  }
      ],
      tableData: [], //表格数据
      pages: {
        //分页数据
        pageNum: 1, // 分页-当前页
        pageSize: 10,
        total: 0,
        // 是否有边框 默认true
        isBorder: true,
        // 是否隔行换色 默认true
        isStripe: true,
        // 每页条数
        pageSizesArr: [5, 10, 20, 50, 100],
        // 是否多选
        isMutiSelect: false
      }
    }
  },
  created() {
 
    this.getTable(this.pages.pageNum, this.pages.pageSize)
  },
  methods: {
  //请求表格数据
    getTable(pageNum, pageSize) {
      let data = {
        pageid: this.dataPageId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.loadingTab = true
      videosList(data)
        .then((res) => {
        // 表格复制
          this.tableData = res.data
          // 前端生成序号
          this.tableData.forEach((item, i) => {
            item.index = indexMethod(i, pageNum, pageSize)
          })

          // 总条数赋值
          this.pages.total = res.page.RecordCount
          this.loadingTab = false
        })
        .catch((err) => {
          this.loadingTab = false
        })
    },


  }
}
</script>
  

<style scoped>

</style>

简单封装了一下，后期如果有别的需求还会完善！