el-table组件的再封装(传入columns和data生成el-table)

一.直接上代码

<template>
  <div class="base-table">
    <el-scrollbar>
      <el-table
        ref="refTable"
        highlight-current-row
        :data="tableData"
        :style="{ height: height + 'px' }"
      >
        <el-table-column
          v-for="column in columnData"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="!column.slots && !column.formatter">
              {{ scope.row[column.prop] }}
            </template>
            <template v-if="column.slots">
              <node-renderer :node="column.slots(scope.row)" />
            </template>
            <template v-if="column.formatter">
              {{ column.formatter(scope.row[column.prop], scope.row) }}
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <div class="pagination-wrapper" v-if="pageShow">
      <el-pagination
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import NodeRenderer from "./NodeRenderer";
export default {
  name: "MyTable",
  components: {
    NodeRenderer,
  },
  props: {
    height: {
      type: Number,
      default: null,
    },
    columnData: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    pagination: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
      }),
    },
    pageShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    // 切换页
    handleCurrentChange(pageNum) {
      this.$emit("currentchange", pageNum); //v2 emit 事件不能用驼峰命名 含大写字母
    },
    // 切换每页显示多少条
    handleSizeChange(pageSize) {
      this.$emit("sizechange", pageSize);
    },
  },
};
</script>

<style lang="scss" scoped>
.base-table {
  // border: 1px solid red;
  border-top: 1px solid #ebeef5;
}

.pagination-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
}
</style>

①NodeRenderer.js文件

export default {
    props: ["node"],
    render(h) {
        return this.node(h) ? this.node(h) : "";
    }
};

二.使用

<MyTable :page-show="false" :column-data="columnData" :table-data="tableData">
      </MyTable>

column的使用

columnData: [
        { prop: "name", label: "下辖企业名称", minWidth: 140 },
        {
          prop: "status",
          label: "状态",
          minWidth: 100,
          slots: (row) => {
            return (h) => {
              let temp = null;
              switch (row.status) {
                case 1:
                  temp = h("span", { class: "font-red" }, "异常");
                  break;
                case 2:
                  temp = h("span", { class: "" }, "正常");
                  break;
                default:
                  break;
              }
              return temp;
            };
          },
        },
        {
          fixed: "right",
          prop: "do",
          label: "查看",
          width: 100,
          slots: (row) => {
            const that = this;
            return (h) => {
              return h("span", { class: "test" }, [
                h(
                  "el-button",
                  {
                    attrs: { size: "mini", type: "primary" },
                    on: {
                      click: function () {
                        that.handelDelete(row);
                      },
                    },
                  },
                  "删除"
                ),
              ]);
            };
          },
        },
      ],