将element中的表格封装成组件

在vue + element的一些后台管理项目中表格分页是经常用到的，所以我在element的基础上，将表格和分页组封装成了一个组件。

表格子组件文件

<template>
  <div class="tableComponent">
    <template v-if="tableInfo && tableInfo !== null">
      <el-table class="table-box"
                :data="tableInfo.tableData"
                stripe
                style="width: 100%;"
                ref="RocketsTable"
                :v-loading="isLoading"
                @row-click="rowClick"
                @selection-change="handleSelectionChange">
        <template v-if="tableInfo.tableData && tableInfo.tableData.length !== 0">
          <template v-if="tableInfo.tableConfig">
            <template v-for="(item, index) in tableInfo.tableConfig">
              <el-table-column v-if="item.renderEventTxt"
                               :prop="item.prop"
                               :label="item.label"
                               sortable
                               :fixed="item.fixed"
                               :align="item.align || 'center'"
                               :key="index + Math.ceil(Math.random() * 99999)"
                               :width="item.width"
                               :formatter="item.renderFun"
                               :type="item.type ? item.type : null">
                <template slot-scope="scope">
                  <el-button v-if="item.renderEvent && item.renderEventTxt"
                             type="text"
                             @click="item.renderEvent(scope.row)">{{item.renderEventTxt ? item.renderEventTxt(scope.row) : '查看'}}</el-button>
                  <template v-else-if="item.renderFun">{{item.renderFun(scope.row)}}</template>
                  <template v-else>{{scope.row[item.prop]}}</template>
                </template>
              </el-table-column>
              <el-table-column v-else
                               :prop="item.prop"
                               sortable
                               :label="item.label"
                               :fixed="item.fixed"
                               :align="item.align || 'center'"
                               :key="index + Math.ceil(Math.random() * 99999)"
                               :width="item.width"
                               :formatter="item.renderFun"
                               :type="item.type ? item.type : null">
              </el-table-column>
            </template>
          </template>
          <template v-if="tableInfo.btnRender">
            <el-table-column v-for="(item, index) in tableInfo.btnRender"
                             :label="item.label"
                             :key="index + '-label'"
                             fixed="right"
                             width="50"
                             align="center">
              <template slot-scope="scope">
                <el-button v-if="!item.isShow"
                           @click.native.prevent="item.btnEvent(scope.row)"
                           plain
                           :type="item.type"
                           :icon="item.icon"
                           size="mini"></el-button>
                <el-button v-else-if="item.isShow(scope.row) === true"
                           @click.native.prevent="item.btnEvent(scope.row)"
                           plain
                           :type="item.type"
                           :icon="item.icon"
                           size="mini"></el-button>
              </template>
            </el-table-column>
          </template>
        </template>
        <template v-else>
          <el-table-column empty-text="暂无数据"></el-table-column>
        </template>
      </el-table>
    </template>
    <div class="block"
         v-if="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageData.pageIndex"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageData.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PublicTable',
  props: {
    // 表格数据
    tableInfo: {
      type: Object,
      default: function () {
        return null
      }
    },
    // 分页的数据
    pageData: {
      type: Object,
      default: function () {
        return null
      }
    },
    // 是否有分页
    pagination: {
      type: Boolean,
      default: true
    },
    // 加载条
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 每页多少条
    handleSizeChange (pageSize) {
      this.$emit('handleSizeChange', pageSize)
    },
    // 当前页码
    handleCurrentChange (pageIndex) {
      this.$emit('handleCurrentChange', pageIndex)
    },
    // 多选
    handleSelectionChange (selected) {
      this.$emit('handleSelectionChange', selected)
    },
    // 点击表格某行
    rowClick (row) {
      this.$emit('rowClick', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.tableComponent {
  .block {
    margin: 20px 0;
    text-align: right;
  }
  .btn-box {
    padding: 10px;
    vertical-align: top;
    .el-button {
      vertical-align: top;
    }
  }
  .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px;
  }
}
</style>

父组件中调用表格组件

<template>
  <div class="mod-home">
    <public-table ref="RocketsTable"
                :table-info="tableInfo"
                :pageData="pageData"
                :isLoading="isLoading"
                @handleSelectionChange="handleSelectionChange"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"></public-table>
  </div>
</template>

<script>
// 引入组件
import PublicTable from '@/components/PublicTable'
export default {
  components: {
    PublicTable
  },
  data () {
    return {
      tableInfo: {
        // 表格数据
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            status: '0'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            status: '1'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            status: '1'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            status: '0'
          }
        ],
        // 表格配置
        tableConfig: [
          {
            type: 'selection',
            width: '55',
            fixed: 'left'
          },
          {
            type: 'index',
            width: '55',
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'date',
            label: '日期',
            align: 'center',
            width: '150px'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          // 如果想根据不同条件去渲染，可以用renderFun函数
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            width: '100px',
            renderFun: function (row) {
              if (row.status === '0') {
                return <span style="color: #E6A23C;">禁用</span>
              } else {
                return <span style="color: #67C23A;">启用</span>
              }
            }
          },
          {
            prop: 'date',
            label: '日期',
            align: 'center',
            width: '200px'
          },
          {
            prop: 'address',
            label: '地址',
            width: '300px'
          }
        ],
        // 按钮的配置
        btnRender: [
          {
            label: '编辑',
            type: 'primary',
            btnEvent: this.editRow,
            icon: 'el-icon-edit'
          },
          {
            label: '详情',
            type: 'success',
            icon: 'el-icon-view',
            btnEvent: this.detailsRow
          },
          {
            label: '删除',
            type: 'danger',
            icon: 'el-icon-delete',
            btnEvent: this.deleteRow
          }
        ]
      },
      // 分页的配置
      pageData: {
        pageSize: 10,
        pageIndex: 1,
        total: 0
      },
      // 加载条
      isLoading: true
    }
  },
  methods: {
    editRow (row) {
      console.log(row)
    },
    detailsRow (row) {
      console.log(row)
    },
    deleteRow (row) {
      console.log(row)
    },
    // 多选事件
    handleSelectionChange (val) {
      console.log(val)
    },
    handleSizeChange (val) {
      console.log(val)
    },
    handleCurrentChange (val) {
      console.log(val)
    }
  }
}
</script>

<style>
</style>

如果表格有其它的需求，可以在子组件中进行修改。
好了，一个简单的组件封装就结束了。如果有问题或者错误，随时沟通。