element el-table 动态表头重新封装+render渲染方式

封装组件 newtable.vue

<template>
  <div class="tabletemplate">
    <el-table
      ref="multipleTable"
      v-loading="tableLoading"
      row-key="id"
      :size="size"
      :data="tableData"
      :row-style="{ border: 'none' }"
      show-overflow-tooltip
      :border="border"
      :height="height"
      style="width: 100%; margin-top: 14px"
      :highlight-current-row="highlighCurrentRow"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      :row-class-name="tableRowClassName"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      @selection-change="selectionChange"
      @current-change="handleRadioChange"
      @row-click="tableRowClick"
    >
      <!-- 选择  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>
      <template v-for="(column,index) in tableColumns">
        <!-- 判断是否有对应插槽slot="name"，有则显示，无则显示默认el-table-column -->
        <slot v-if="$slots[column.key]" :name="column.key"></slot>
        <el-table-column
          v-else
          :key="index"
          :align="column.align||'center'"
          :fixed="column.fixed||false"
          :label="column.title||''"
          :prop="column.key"
          :width="column.width||0"
          :min-width="column.minWidth||null"
          :max-width="column.maxWidth||null"
          :show-overflow-tooltip="column.show-overflow-tooltip||false"
          :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.key] }}
            </span>
          </template>
        </el-table-column>
      </template>
    </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 [];
      },
    },
    cellStyle: {
      // 表格数据
      type: [Function, Object],
      required: false,
      default: function () {
        return [];
      },
    },
    headerCellStyle: {
      // 表格数据
      type: [Function, Object],
      required: false,
      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,
    },
    height: {
      type: [Number, String],
      default: null,
    },
    border: {
      type: Boolean,
      default: false,
    },
  },
  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);
    },
    selectionChange(val) {
      this.$emit('selectionChange', val);
    },
    handleRadioChange(val) {
      if (val) {
        this.defaultRadio = val.index;
      }
      this.$emit('handleRadioChange', val);
    },
    clearSelection() {
      this.$refs['multipleTable'].clearSelection();
    },
    // // 单元格样式
    // cellStyle({ row, column, rowIndex, columnIndex }) {
    //   this.$emit('cellStyle', { value: { row, column, rowIndex, columnIndex } });
    // },
    // // 单元格表头样式
    // headerCellStyle({ row, column, rowIndex, columnIndex }) {
    //   this.$emit('headerCellStyle', { value: { row, column, rowIndex, columnIndex } });
    // },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-radio__label {
  display: none;
}
</style>

使用方式

<n-el-table
   :table-data="table.data"
   :table-columns="tableColumns"
   :table-loading="table.loading"
   :height="table.height"
   :cell-style="CellStyle"
   :border="true"
   :header-cell-style="tableHeaderCellStyle"
   @selection-change="handleSelectionChange"
>
    <!-- 插槽替换 -->
   <el-table-column slot="operation" label="操作" width="120" align="center">                        
      <template slot-scope="scope">
        <el-button size="mini" type="primary" plain icon="el-icon-edit-outline" @click="handleApprvo(scope.row)">
          <span>审批</span>
        </el-button></template>
   </el-table-column>
</n-el-table>

对应数据

table: {
  loading: false,
  height: null,
  columns: [
      [
        {
          key: 'brName',
          title: '患者',
          align: 'center',
          minWidth: '80'
        },
        {
          key: 'brSex',
          title: '性别',
          minWidth: '80'
        },
        {
          key: 'brAge',
          title: '年龄',
          minWidth: '60'
        },
        {
          key: 'projectName',
          title: '项目名称',
          minWidth: '120'
        },
        {
          key: 'dataSource',
          title: '数据来源',
          render: (h, params) => {
            if (params.row.dataSource == 1) {
              return h('div', '123131')
            } else {
              return h('div', '333')
            }
          }
        },
        {
          key: 'createTime',
          title: '申请时间',
        },
        {
          key: 'status',
          title: '状态',
        },
        {
          width: '300',
          key: 'operation',
          fixed: 'right',
          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('禁用');
                  },
                },
              }),
            ]);
          },
        },
  ],
  data: [],
},