elementUI的table组件的封装，组件内包括表格、分页内容；表格包括对特殊列的渲染及操作列的渲染

1、封装的table组件

<template>
  <section>
    <Card style="margin-top: 5px;">
      <Table
        :ref="refs"
        stripe
        :loading="loaDing"
        :data="tableData"
        size="small"
        :height="tableHeight"
        :border="border"
      >
        <table-column align="center" label="序号" fixed="left" width="70px">
          <template slot-scope="scope">
            <span>
              {{scope.$index +
              (pageIndex - 1) *
              pageSize +
              1}}
            </span>
          </template>
        </table-column>
        <table-column
          v-for="(item,index) in columnsList"
          :width="item.width ? item.width : ''"
          :min-width="item.minWidth? item.minWidth : ''"
          :key="index"
          :align="item.align"
          :label="item.label"
          :prop="item.prop"
          :show-overflow-tooltip="item.tooltip"
        >
          <template slot-scope="scope">
            <ex-slot
              v-if="item.render"
              :render="item.render"
              :row="scope.row"
              :index="scope.$index"
              :column="item"
            />
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </table-column>
      </Table>
      <Pagination
        size="small"
        style="margin: 10px 10px 0 0;text-align: right;"
        :total="dataCount"
        :page-sizes="[20,30,40]"
        :current-page="pageIndex"
        :page-size="pageSize"
        class="paging"
        @size-change="changeSize"
        @current-change="changePage"
        v-if="dataCount != 0 && showPagination"
      ></Pagination>
    </Card>
  </section>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    };
    if (data.props.column) params.column = data.props.column;
    return data.props.render(h, params);
  }
};

export default {
  components: {
    exSlot
  },
  name: "iTable",
  props: {
    refs: String,
    columnsList: Array,
    tableData: Array,
    loaDing: Boolean,
    dataCount: Number,
    tableHeight: Number,
    showPagination: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pageSize: 20,
      pageIndex: 1
    };
  },
  mounted() {},
  methods: {
    changeSize(size) {
      this.pageSize = size;
      this.$emit("refreshData");
    },
    changePage(index) {
      this.pageIndex = index;
      this.$emit("refreshData");
    },
    getData() {
      this.$emit(refreshData);
    }
  }
};
</script>

2、引用封装的table组件页面

前提：按照Vue规范的正确引入组件并注册

<template>
     <i-table
        ref="questionStorageitable"
        :table-data="tableList"
        :columns-list="tabeleColumns"
        :table-height="tableheight"
        :data-count="dataCount"
        v-on:refreshData="getData"
      ></i-table>
</template>
<script>
import iTable from "@/components/table.vue";
export default {
  components: {
    iTable
  },
  data:{
    return {
      tableList: [],
      dataCount: 0,
      tableheight: 400,
      tabeleColumns: [
        {
          label: "题型",
          prop: "type_name",
          minWidth: 100,
          align: "center",
          tooltip: true
        },
        {
          label: "题目",
          prop: "title",
          minWidth: 250,
          tooltip: true,
          align: "left"
        },
        {
          label: "专业",
          prop: "category_name",
          minWidth: 150,
          tooltip: true,
          align: "center"
        },
        {
          label: "专业等级",
          prop: "grade_name",
          minWidth: 70,
          tooltip: true,
          align: "center"
        },
        {
          label: "解析",
          prop: "analyze",
          minWidth: 250,
          tooltip: true,
          align: "left"
        },
        {
          label: "难度",
          prop: "level_name",
          minWidth: 70,
          tooltip: true,
          align: "center"
        },
        {
          label: "选项个数",
          prop: "option_num",
          minWidth: 70,
          tooltip: true,
          align: "center"
        },
        {
          label: "状态",
          prop: "state",
          minWidth: 100,
          tooltip: true,
          align: "center",
          render: (h, params) => {
            const text = params.row.state == 1 ? "启用中" : "停用中";
            return h(
              "Tag",
              {
                props: {
                  type: params.row.state == 1 ? "success" : "danger"
                }
              },
              text
            );
          }
        },
        {
          label: "操作",
          minWidth: 250,
          align: "center",
          prop: "handle",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "mini",
                    icon: "el-icon-edit"
                  },
                  style: {
                    display: this.jurisdiction.update ? "inline-block" : "none"
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Popconfirm",
                {
                  props: {
                    title: "您确定要删除这条数据吗？",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                  },
                  on: {
                    onConfirm: () => {
                      this.handleDelete(params.row);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        margin: "0 5px",
                        display: this.jurisdiction.delete
                          ? "inline-block"
                          : "none"
                      },
                      slot: "reference",
                      props: {
                        type: "danger",
                        icon: "el-icon-delete",
                        size: "mini"
                      }
                    },
                    "删除"
                  )
                ]
              )
            ]);
          }
        }
      ]
    }
  }

}
</script>

getData方法内部用于请求要展示的table列表数据