Vue + Element 表格 + 分页器 二次封装

表格效果

组件的创建

<template>
  <div id="Wrap">
    <!-- 表格 -->
    <el-table
      :data="tableData"
      :border="hasBorder"
      :header-cell-style="{ background: '#DDDDDD', color: '#606266' }"
    >
      <!-- 序号 -->
      <el-table-column
        v-if="hasIndex"
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="80"
      >
      </el-table-column>
      <!-- 其他 -->
      <template v-for="item in tableColumnOptions">
        <!-- 插槽列 -->
        <el-table-column
          v-if="item.columnType"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :header-align="item.headerAlign || 'center'"
          :align="item.align || 'center'"
        >
          <template slot-scope="{ row }">
            <slot :name="item.soltName" :data="row"></slot>
          </template>
        </el-table-column>
        <!-- 非插槽列 -->
        <el-table-column
          v-else
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :header-align="item.headerAlign || 'center'"
          :align="item.align || 'center'"
        >
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        :hide-on-single-page="isShowPagination"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableDataTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
    name: 'BaseTable',
    props: {
      // 表格数据
      tableData: {
        type: Array,
        default() {
          return []
        }
      },
      // 表格列项
      tableColumnOptions: {
        type: Array,
        require: true,
        default() {
          return []
        }
      },
      // 表格数据总量
      tableDataTotal: {
        type: Number,
        default() {
          return 0
        }
      },
      // 是否具有索引
      hasIndex: {
        type: Boolean,
        default() {
          return true
        }
      },
      // 是否显示边框
      hasBorder: {
        type: Boolean,
        default() {
          return true
        }
      }
    },
    data() {
      return {
        // 表格当前页数
        currentPage: 1,
        // 表格每页数量
        pageSize: 10
      }
    },
    computed: {
      // 计算是否显示分页器
      isShowPagination() {
        const isShow = this.tableDataTotal === 0
        return isShow
      }
    },
    methods: {
      // 跳转页面
      handleCurrentChange(val) {
        const params = {
          currentPage: val,
          pageSize: this.pageSize
        }
        this.$emit('update', params)
      },
      // 修改每页数量
      handleSizeChange(val) {
        const params = {
          currentPage: this.currentPage,
          pageSize: val
        }
        this.$emit('update', params)
      }
    }
}
</script>
<style lang="scss" scoped>
#Wrap {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  .pagination {
    display: flex;
    justify-content: flex-end;
    padding: 10px 10px 10px 0;
  }
}
</style>

组件的使用 (引入和注册步骤省略没写)

<template>
  <div>
    <!--
      hasIndex  :是否显示索引(默认显示)
      hasBorder :是否显示边框(默认显示)
      tableData :表格数据
      tableDataTotal :表格数据总量
      tableColumnOptions :表格列项
    -->
    <table-base
      :has-index="false"
      :has-border="true"
      :table-data="tableData"
      :table-data-total="20"
      :table-column-options="tableColumnOptions"
      @update="handleUpdate"
    >
      <!-- 类型插槽 -->
      <template #type="{ data }">
        <el-tag :type="data.type ? 'success' : 'danger'">
          {{ data.type ? '通过' : '驳回' }}
        </el-tag>
      </template>
      <!-- 操作插槽 -->
      <template #operation="{ data }">
        <el-button type="success" size="mini">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(data)">删除</el-button>
      </template>
    </table-base>
  </div>
</template>
<script type="text/ecmascript-6">
import TableBase from '@/components/TableBase'
export default {
    name: 'ComponentTable',
    components: {
      TableBase
    },
    data() {
      return {
        /**
         * 表格模拟数据
         */
        tableData: [
          { id: 1233, name: '阿松大', type: 1, desc: '1231345434' },
          { id: 6570, name: '投影机', type: 0, desc: '1234144564' },
          { id: 7897, name: '阿什顿', type: 0, desc: '7895745675' },
          { id: 3969, name: '富贵花', type: 1, desc: '9578567455' },
          { id: 3457, name: '法国海', type: 1, desc: '3465678567' },
          { id: 6570, name: '投影机', type: 0, desc: '1234144564' },
          { id: 7897, name: '阿什顿', type: 0, desc: '7895745675' },
          { id: 3969, name: '富贵花', type: 1, desc: '9578567455' }
        ],
        /**
         * 表格列项数据 (必传)
         * label 表格列项名称
         * prop: ''
         * width 列项宽度
         * align       内容对齐方式 (默认居中)
         * headerAlign 表头对齐方式 (默认居中)
         * columnType  是否开启插槽
         * soltName    插槽名
         */
        tableColumnOptions: [
          { label: 'ID', prop: 'id' },
          { label: '名称', prop: 'name' },
          { label: '类型', prop: 'type', columnType: true, soltName: 'type' },
          { label: '描述', prop: 'desc', width: '300' },
          { label: '操作', prop: 'operation', width: '300', columnType: true, soltName: 'operation' }
        ]
      }
    },
    methods: {
      // 更新表格数据
      handleUpdate(params) {
        console.log(params)
      },
      // 删除操作
      handleDelete(item) {
        console.log(item)
      }
    }
}
</script>
<style lang="sass" scoped></style>

如有错误,欢迎批评指正