element-ui封装 el-table el-paginat

components 文件夹 创建 MyTable
MyTable 下 index .vue
方法一 使用插槽的方式
方法二 使用 render 方式

<template>
  <div id="commonTable">
    <!-- :max-height="maxHeight" -->
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      :data="data"
      tooltip-effect="light"
    >
      <!--region 选择框-->
      <el-table-column v-if="isSelection" type="selection"> </el-table-column>

      <!--新增操作栏-->
      <el-table-column v-if="isAction" label="操作" fixed="left">
        <template slot-scope="{ row, $index }">
          <slot :rowInfo="{ row, $index }" name="action"></slot>
        </template>
      </el-table-column>

      <!-- 方法二 -->
      <el-column
        v-bind="$attrs"
        v-for="(item, index) in columns"
        :key="index"
        :column="item"
      >
      </el-column>

      <!--  方法一 -->
      <!-- <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
        :fixed="item.fixed"
        :align="item.align"
        :type="item.type"
      >

        <template slot-scope="{ row, $index }">
          {{ !$scopedSlots[item.prop] ? row[item.prop] : "" }}
          <slot
            :rowInfo="{ row, $index }"
            :name="item.prop"
            v-if="$scopedSlots[item.prop]"
          ></slot>
        </template>

      </el-table-column> -->
    </el-table>
    <!-- @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
    <el-pagination
      v-if="isPagination"
      v-bind="$attrs"
      v-on="$listeners"
      style="margin-top: 20px; text-align: right;"
    ></el-pagination>
  </div>
</template>

<script>
import ElColumn from "./el-column";
export default {
  name: "MyTable",
  components: {
    ElColumn
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    isSelection: {
      type: Boolean,
      default: false
    },
    isPagination: {
      type: Boolean,
      default: true
    },
    isAction: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.rowKey, "表格组件", this.$scopedSlots);
    // 没有在 props 写接收才看得到
    console.log(this.$attrs, "表格组件", this.$listeners);
  },
  methods: {}
};
</script>

el-column .vue

<template>
  <el-table-column
    v-bind="$attrs"
    :key="column.prop"
    :label="column.label"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :align="column.align"
    :type="column.type"
  >
    <template slot-scope="scope">
      <el-render :scope="scope" :render="column.render"> </el-render>
    </template>
  </el-table-column>
</template>

<script>
import ElRender from "./el-render";
export default {
  name: "ElColumn",
  components: {
    ElRender
  },
  props: {
    column: Object
  },
  data() {
    return {
      prop: this.column.prop
    };
  },
  mounted() {
    console.log(this.$attrs, "表格组件子项", this.column);
  },
  watch: {
    column: {
      handler() {
        this.setColumn();
      },
      immediate: true
    }
  },
  methods: {
    setColumn() {
      if (!this.column.render) {
        this.column.render = (h, scope) => {
          return <span>{scope.row[this.prop]}</span>;
        };
      }
    }
  }
};
</script>

el-render.vue

<script>
export default {
  name: "ElRender",
  functional: true,
  props: {
    scope: Object,
    render: Function
  },
  render: (h, ctx) => {
    // console.log(ctx.props.scope, "什么上下文", ctx);
    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : "";
  }
};
</script>

index.js 全局注册组件

import MyTable from "./MyTable";

export default Vue => {
  // 注册组件
  // 使用Vue.component()注册组件时，全局id自动作为组件的名称
  // 也就是说，此时第一参数为组件的名称
  Vue.component("my-table", MyTable);
};

main.js

import components from './components/index.js';

Vue.use(components);

组件使用
其他参数按照 element-ui 组件标注

<my-table
  v-loading="loading"
  v-bind="{ ...tableData, data: list }"
  :current-page.sync="page"
  :page-sizes="[10, 20, 30, 40]"
  :page-size.sync="per_page"
  :total="total"
  rowKey="id"
  border
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  @selection-change="handleSelectionChange"
  layout="total,  prev, pager, next, sizes, jumper"
  style="width: 100%;margin-top: 20px;"
>
  <template v-slot:action="slotData">
    <el-button @click="del(slotData.rowInfo)" size="small"
      >删除</el-button
    >
  </template>
  <!--  方法一 -->
  <!-- <template v-slot:type="slotData">
    <el-button @click="del(slotData.rowInfo)" size="small"
      >删除</el-button
    >
  </template> -->
</my-table>

// 数据示例
tableData: {
  isSelection: true,
  // isAction: true,
  // data: this.list,
  columns: [
    {
      // fixed: true,
      type: "expand",
      // 方法二 render 方式
      render: (h, scope) => {
        return <span>{scope.row.type}</span>;
      }
    },
    {
      prop: "id",
      label: "ID",
      minWidth: 260,
      // fixed: true,
      align: "center"
    }
    // {
    //   prop: "type",
    //   label: "类型"
    // },
  ]
}

参考：lb-element-table