Vue+Element表格封装，可自定义内容，带分页

封装表格组件，components内新建MyTable.vue，名称自定义 xxx.vue

注：封装组件内若想自定义每页显示条目需添加 page-size 属性，否则就会默认为10条

关于分页具体可看 http://t.csdn.cn/zd0cA

table上属性和事件仅展示部分示例，按个人需求可自行添加或删除。

<template>
  <div>
    <el-table
      border
      ref="table"
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :width="width"
      :height="height"
      :max-height="maxHeight"
      :show-header="showHeader"
      :fit="fit"
      :size="size"
      :data="tableData"
      :header-row-class-name="headerRowClassName"
      :header-row-style="headerRowStyle"
      :header-cell-class-name="headerCellClassName"
      :header-cell-style="headerCellStyle"
      :row-class-name="rowClassName"
      :row-style="rowStyle"
      :cell-class-name="cellClassName"
      :cell-style="cellStyle"
      @select="selectCheck"
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :type="item.type || null"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :header-align="item.headerAlign || 'center'"
          :show-overflow-tooltip="item.tooltip || false"
          :sortable="item.sortable || false"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
        >
          <!-- 利用slot插槽 自定义列 -->
          <template #default="scope" v-if="item.slot">
            <slot :name="item.slot" :scope="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="Object.keys(this.pagination).length > 0"
      style="text-align: right"
      :total="total"
      :page-size="pagination.pageSize"
      :current-page="pagination.currentPage"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MyTable",
  props: {
    // 加载动画
    loading: {
      type: Boolean,
      default: false
    },
    // 表格宽度
    width: [String, Number],
    // 表格高度
    height: [String, Number],
    // 表格最大高度
    maxHeight: [String, Number],
    // 显示表头
    showHeader: {
      type: Boolean,
      default: true
    },
    // 列的宽度是否自撑开
    fit: {
      type: Boolean,
      default: true
    },
    // Table 的尺寸 medium/small/mini
    size: {
      type: String
    },
    // 表头数据
    columns: {
      type: Array
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件	参数selection, row
    select: {
      type: [Function]
    },
    // 表头行的 className 的回调方法 Function({row, rowIndex})/String
    headerRowClassName: {
      type: [Function, String]
    },
    // 表头行的 style 的回调方法 Function({row, rowIndex})/Object
    headerRowStyle: {
      type: [Function, Object],
      default: () => ({})
    },
    // 表头单元格的 className 的回调方法 Function({row, column, rowIndex, columnIndex})/String
    headerCellClassName: {
      type: [Function, String]
    },
    // 表头单元格的 style 的回调方法 Function({row, column, rowIndex, columnIndex})/Object
    headerCellStyle: {
      type: [Function, Object],
      default: () => ({})
    },
    // 行的 className 的回调方法 Function({row, rowIndex})/String
    rowClassName: {
      type: [Function, String]
    },
    // 行的 style 的回调方法 Function({row, rowIndex})/Object
    rowStyle: {
      type: [Function, Object],
      default: () => ({})
    },
    // 单元格的 className 的回调方法 Function({row, column, rowIndex, columnIndex})/String
    cellClassName: {
      type: [Function, String]
    },
    // 单元格的 style 的回调方法 Function({row, column, rowIndex, columnIndex})/Object
    cellStyle: {
      type: [Function, Object],
      default: () => ({})
    },
    // 总条目数
    total: {
      type: [String, Number],
      default: 0
    },
    // 分页器 当前页数、每页显示条目个数
    pagination: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    selectCheck(selection, row) {
      this.$emit("select", selection, row)
    },
    // 当前页数改变事件
    handleCurrentChange(val) {
      this.$emit("currentChange", val)
    }
  }
}
</script>

组件内使用...

<template>
  <div>
    <p>Vue+Element 表格封装使用</p>
    <my-table
      ref="myTable"
      :columns="columns"
      :tableData="tableData"
      :cellStyle="cellStyle"
      :headerCellStyle="headerCellStyle"
      :rowClassName="rowClassName"
      :total="total"
      :pagination="pagination"
      @select="select"
      @currentChange="currentChange"
    >
      <template v-slot:ageSlot="{ scope }">
        {{ "今年" + scope.row.age + "岁了" }}
      </template>
      <!-- 不使用数据可不接收scope值 -->
      <template slot="operationSlot">
        <el-link type="primary">编辑</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="danger">删除</el-link>
      </template>
    </my-table>
  </div>
</template>

<style scoped>
p {
  color: #2c3e50;
  font-size: 32px;
  font-weight: bold;
}
</style>

<script>
import MyTable from "@/components/MyTable"
export default {
  components: {
    MyTable
  },
  data() {
    return {
      // 表头数据
      columns: [
        {
          type: "selection"
        },
        {
          label: "序号",
          type: "index",
          width: "70"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "性别",
          prop: "sex"
        },
        {
          label: "年龄",
          prop: "age",
          slot: "ageSlot"
        },
        {
          label: "操作",
          width: "150",
          slot: "operationSlot"
        },
        {
          label: "更多",
          type: "expand",
          width: "70"
        }
      ],
      // 表格数据
      tableData: [
        {
          name: "艾琳",
          sex: "女",
          age: "22"
        },
        {
          name: "东方曜",
          sex: "男",
          age: "19"
        },
        {
          name: "黑暗暴君",
          sex: "不详",
          age: "999"
        }
      ],
      total: 20, // 总条目数
      pagination: {
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示条目个数
      }
    }
  },
  methods: {
    // 当前页数改变事件
    currentChange(val) {
      this.pagination.currentPage = val
      console.log("当前页数", val)
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    select(selection, row) {
      console.log("选择的所有数据行", selection)
      console.log("当前选择的数据行", row)
    },
    // 表头行的 className 的回调方法
    headerRowClassName({ row, rowIndex }) {
      return "header_row_class_name"
    },
    // 表头单元格的 style 的回调方法
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return "background: #FAFAFA"
    },
    // 行的 className 的回调方法
    rowClassName({ row, rowIndex }) {
      return "row_class_name"
    },
    // 单元格的 style 的回调方法
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 1 && columnIndex == 3) {
        return {
          background: "skyBlue",
          "border-radius": "20px"
        }
      }
    },
    // 仅对 type=selection 的列有效，Function(row, index) 用来决定这一行的 CheckBox 是否可以勾选
    selectable(row, index) {
      if (row.sex == "女") {
        return false
      } else {
        return true
      }
    }
  }
}
</script>