element ui table 表格 二次封装——支持自定义列，render渲染表格数据，支持单选。_element table 二次封装 自定义render方法渲染内容

基于element table 表格二次封装，可以自定义表头信息，支持 render 函数渲染表格数据。

新建一个elTable文件，封装支持多选，单选，表尾合计行等

组件封装内容

<template>
  <div class="tabletemplate">
    <el-table
      row-key="id"
      :size="size"
      :data="tableData"
      v-loading="tableLoading"
      :row-style="{ border: 'none' }"
      show-overflow-tooltip
      style="width: 100%; margin-top: 14px"
      :highlight-current-row="highlighCurrentRow"
      @selection-change="handleSelectionChange"
      @current-change="handleRadioChange"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      ref="multipleTable"
      @row-click="tableRowClick"
      :row-class-name="tableRowClassName"
    >
      <!-- 选择  v-if表格是够显示多选框 -->
      <el-table-column
        v-if="selectionShow"
        type="selection"
        align="center"
        :width="selectionWith"
      ></el-table-column>
      <!-- // 单选框，多选单选只能选则显示一个或者都不显示 -->
      <el-table-column v-if="radioShow" type="index" :width="radioWidth" align="center">
        <template slot-scope="scope">
          <el-radio v-model="defaultRadio" :label="scope.row.index">{{scope.row.index}} </el-radio>
        </template>
      </el-table-column>
      <!-- 是否显示序列号 -->
      <el-table-column
        v-if="isSerialNumber"
        type="index"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        align="left"
        v-for="column in tableColumns"
        :key="column.dataIndex"
        :label="column.title"
        :prop="column.dataIndex"
        :width="column.width"
        show-overflow-tooltip
        :sortable="column.sortable"
      >
        <template slot-scope="scope">
          <expandDom
            v-if="column.render"
            :render="column.render"
            :index="scope.$index"
            :column="column"
            :row="scope.row"
          ></expandDom>
          <span v-else>
            {{ scope.row[column.dataIndex] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  components: {
    /** render函数渲染组件* */
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      },
    },
  },
  props: {
    // 是否显示序列号
    isSerialNumber: {
      type: Boolean,
      default: false,
    },
    tableData: {
      // 表格数据
      type: Array,
      required: true,
      default: function () {
        return [];
      },
    },
    tableColumns: {
      // 表格列数据
      type: Array,
      required: true,
      default: function () {
        return [];
      },
    },
    selectionWith: {
      type: Number,
      required: false,
      default: 50,
    },
    radioWidth: {
      type: Number,
      required: false,
      default: 50,
    },
    selectionShow: {
      // 多选   默认显示多选
      type: Boolean,
      default: false,
    },
    radioShow: {
      // 单选 使用单选应将多选置为false
      type: Boolean,
      default: false,
    },
    highlighCurrentRow: {
      type: Boolean,
      default: false,
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "medium ",
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    sumText: {
      type: String,
      default: "合计",
    },
    radioVal: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      defaultRadio: -1,
    };
  },
  watch: {
    radioVal(newVal) {
      this.defaultRadio = newVal;
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    tableRowClick(row, event, column) {
      this.$emit("tableRowClick", row, event, column);
    },
    // 合并行或列的计算方法
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      this.$emit("arraySpanMethod", { value: { row, column, rowIndex, columnIndex } });
    },
    // 自定义的合计计算方法
    getSummaries(params) {
      this.$emit("getSummaries", params);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    handleRadioChange(val) {
      if (val) {
        this.defaultRadio = val.index;
      }
      this.$emit("handleRadioChange", val);
    },
    clearSelection() {
      this.$refs["multipleTable"].clearSelection();
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-radio__label {
  display: none;
}
</style>

在index.js注册公共组件，方便以后的开发，

import elTable from '@/components/ElementUI/elTable'
Vue.component("j-el-table", elTable);

 项目的入口文件引入index.js

import '@/components/index';

最后就可以在我们要写的页面里面去使用这个全局组件了，上代码

<template>
  <div class="page">
    <j-el-table
      :tableData="tableData"
      :tableColumns="tableColumns"
      :tableLoading="tableLoading"
      :selectionShow="true"
      @handleSelectionChange="handleSelectionChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
      tableLoading: false,
    };
  },
  methods: {
    initTableColumns() {
      this.tableColumns = [
        {
          dataIndex: "username",
          title: "姓名",
        },
        {
          dataIndex: "name",
          title: "账户",
        },
        {
          dataIndex: "rc",
          title: "性别",
        },
        {
          dataIndex: "n",
          title: "手机号",
        },
        {
          dataIndex: "r",
          title: "组织部门",
        },
        {
          dataIndex: "ros",
          title: "用户状态",
        },
        {
          dataIndex: "createTime",
          title: "创建时间",
        },
        {
          width: "300",
          dataIndex: "operation",
          title: "操作",
          render: (h, params) => {
            return h("div", [
              h("a", {
                domProps: {
                  innerHTML: "查看",
                },
                style: {
                  marginRight: "10px",
                },
                on: {
                  click: () => {
                    alert("我是查看页面");
                  },
                },
              }),
              h("a", {
                domProps: {
                  innerHTML: "编辑",
                },
                style: {
                  marginRight: "10px",
                },
                on: {
                  click: () => {
                    alert("点击进行编辑")
                  },
                },
              }),
              h("a", {
                domProps: {
                  innerHTML: "修改密码",
                },
                style: {
                  marginRight: "10px",
                },
                on: {
                  click: () => {
                    alert("修改密码");
                  },
                },
              }),
              h("a", {
                domProps: {
                  innerHTML: "禁用",
                },
                style: {
                  color: "#559df9",
                  cursor: "pointer",
                  marginRight: "10px",
                },
                on: {
                  click: () => {
                    alert("禁用");
                  },
                },
              }),
            ]);
          },
        },
      ];
    },
  },
};
</script>
<style lang="less" scoped></style>