子组件table封装 html部分

<template>
  <div
    v-loading="loading">
    <el-table
      ref="tableData"
      :stripe="stripe"
      :height="height"
      :max-height="maxHeight"
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :size="tableSize"
      :data="data"
      @selection-change="handleSelectionChange"
      @current-change="handleTableCurrentChange"
      @row-click="handleTableRowClick"
      v-bind="otherConfig">
      <template v-for="(p, index) in columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="p.selection"
          type="selection"
          width="p.width ? p.width : 50"
          :fixed="p.fixed"
          align="center"
          :key="index"
        ></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="p.type"
          type="index"
          width="p.width ? p.width : 80"
          label="序号"
          :index="p.indexMethod"
          :key="index"
        ></el-table-column>
        <!-- 多级表头 -->
        <el-table-column
          v-else-if="p.multi"
          align="center"
          :label="p.label"
          :key="index"
        >
          <el-table-column
            v-for="(child, childIndex) in p.children"
            :key="childIndex"
            v-bind="child"
          >
          </el-table-column>
        </el-table-column>
        <!-- 自定义内容 -->
        <el-table-column
         v-else-if="p.slot"
         :label="p.label"
         :key="index">
        <slot
          :name="p.slot"
          :fixed="p.fixed"></slot>
        </el-table-column>

        <!-- 常规字段 -->
        <el-table-column
          v-else
          :prop="p.prop"
          :width="p.width"
          :label="p.label"
          :key="index"
        ></el-table-column>
      </template>
    </el-table>
    <!-- eslint-disable -->
    <el-pagination
      v-if="isPaginationShow && pagination.total"
      class="opagination mt12"
      background
      layout="sizes, prev, pager, next"
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="pagination.current"
      :page-size="pagination.size"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

js部分

<script>
export default {
  name: 'AppTable',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => ({})
    },
    isPaginationShow: {
      type: Boolean,
      default: true
    },
    tableSize: {
      type: String,
      default: 'small'
    },
    stripe: {
      type: Boolean,
      default: true
    },
    otherConfig: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {
    // 切换页码
    handleCurrentChange () {
      this.$emit('getData')
    },
    // 切换每页条数
    handleSizeChange (value) {
      // current-page和 page-size都支持 .sync修饰符，用了.sync修饰符，就不需要手动给 this.pagination赋值了
      this.pagination.size = value
      this.$emit('getData')
    },
    // 切换选择
    handleSelectionChange (val) {
      this.$emit('changeSelection', val)
    },
    // 单选
    handleTableCurrentChange (currentRow) {
      this.$emit('changeCurrent', currentRow)
    },
    // 点击行
    handleTableRowClick (currentRow) {
      this.$emit('rowClick', currentRow)
    }
  },
  watch: {
    data () {
      // 重新请求数据时 table滚动到顶部
      this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0
    }
  }
}
</script>

在父组件中使用 html 代码

<template>
  <div class="hello">
   <app-table
      :columns="columns"
      :data="tableList"
      :pagination="pagination"
      @getData="fetchTableList"
      :loading="loading"
   >
        <template slot="action"
          slot-scope="scope">
          <el-button
            type="text"
            @click="showDetail(scope.row)">查看详情</el-button>
        </template>
   </app-table>
  </div>
</template>

js代码部分

<script>
// 引入子组件表单
import AppTable from '@/components/AppTable.vue'
export default {
  name: 'HelloWorld',
  components: { AppTable },
  data () {
    return {
      loading: false,
      columns: [
        { selection: true },
        { type: 'index' },
        {prop: 'name', label: '名称', width: 160},
        { slot: 'action', label: '操作' }
      ],
      tableList: [{}],
      pagination: {
        current: 1,
        size: 10,
        total: 100
      }
    }
  },
  methods: {
    fetchTableList () {
    // 分页时触发表单数据请求
    console.log(this.pagination)
    }
  }
}
</script>

这里基本的使用都可以满足，里面包含表列的：自定义插槽；表格选择器；表格序号以及多级表头的渲染。
通用样式一般根据定制的格式来写，一般来说表格基本格式都是一样的，也有可能会出现表格的表头行高，表格的行高内容不一样的情况，也可通过配置参数来处理。