vue3超购项目中的element ui二次封装代码

以下是一个简单的示例代码，演示了如何封装一个基于 Element UI 的表格组件：

<template>
  <div>
    <el-table
      :data="tableData"
      :height="height"
      :border="border"
      :stripe="stripe"
      :show-header="showHeader"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="summaryMethod"
      :row-class-name="rowClassName"
      :cell-class-name="cellClassName"
      :header-row-class-name="headerRowClassName"
      :header-cell-class-name="headerCellClassName"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      :header-row-style="headerRowStyle"
      :header-cell-style="headerCellStyle"
      :highlight-current-row="highlightCurrentRow"
      :current-row-key="currentRowKey"
      :empty-text="emptyText"
      :expand-row-keys="expandRowKeys"
      :default-expand-all="defaultExpandAll"
      :tooltip-effect="tooltipEffect"
      :span-method="spanMethod"
      :select-on-indeterminate="selectOnIndeterminate"
      :indent="indent"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange"
      @cell-mouse-enter="handleCellMouseEnter"
      @cell-mouse-leave="handleCellMouseLeave"
      @row-click="handleRowClick"
      @row-dblclick="handleRowDblclick"
      @row-contextmenu="handleRowContextmenu"
      @expand-change="handleExpandChange"
    >
      <!-- 插槽 -->
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
import { ElTable } from 'element-plus'

export default {
  name: 'MyTable',
  components: { ElTable },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    height: {
      type: String,
      default: '100%',
    },
    border: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    sumText: {
      type: String,
      default: '',
    },
    summaryMethod: {
      type: Function,
      default: () => {},
    },
    rowClassName: {
      type: Function,
      default: () => '',
    },
    cellClassName: {
      type: Function,
      default: () => '',
    },
    headerRowClassName: {
      type: Function,
      default: () => '',
    },
    headerCellClassName: {
      type: Function,
      default: () => '',
    },
    rowStyle: {
      type: Function,
      default: () => {},
    },
    cellStyle: {
      type: Function,
      default: () => {},
    },
    headerRowStyle: {
      type: Function,
      default: () => {},
    },
    headerCellStyle: {
      type: Function,
      default: () => {},
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    currentRowKey: {
      type: [String, Number],
      default: '',
    },
    emptyText: {
      type: String,
      default: '暂无数据',
    },
    expandRowKeys: {
      type: Array,
      default: () => [],
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    tooltipEffect: {
      type: String,
      default: 'dark',
    },
    spanMethod: {
      type: Function,
      default: () => {},
    },
    selectOnIndeterminate: {
      type: Boolean,
      default: false,
    },
    indent: {
      type: Number,
      default: 16,
    },
  },
  methods: {
    handleSelect(selection, row) {
      this.$emit('select', selection, row)
    },
    handleSelectAll(selection) {
      this.$emit('select-all', selection)
    },
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    handleCellMouseEnter(row, column, cell, event) {
      this.$emit('cell-mouse-enter', row, column, cell, event)
    },
    handleCellMouseLeave(row, column, cell, event) {
      this.$emit('cell-mouse-leave', row, column, cell, event)
    },
    handleRowClick(row, column, event) {
      this.$emit('row-click', row, column, event)
    },
    handleRowDblclick(row, column, event) {
      this.$emit('row-dblclick', row, column, event)
    },
    handleRowContextmenu(row, column, event) {
      this.$emit('row-contextmenu', row, column, event)
    },
    handleExpandChange(row, expandedRows) {
      this.$emit('expand-change', row, expandedRows)
    },
  },
}
</script>

在上面的代码中，我们创建了一个名为 `MyTable` 的组件，并将 `ElTable` 组件引入为子组件。我们使用 `props` 属性声明了许多 Element UI 表格组件的属性，以便我们可以在组件中对它们进行设置。我们还声明了一些事件处理程序方法，以便我们可以在组件中处理表格事件并将它们传递给父组件。

最后，我们使用插槽来让父组件自定义表格的列和内容。通过这种方式，我们可以在不影响组件的功能的情况下，使组件更加灵活。