vue基于element-ui table二次封装

Vue基于Element UI Table的二次封装可以通过创建一个自定义的组件来实现。以下是一个简单的示例，演示了如何封装一个基于Element UI Table的组件：

<template>
  <el-table :data="tableData" :row-key="rowKey" :height="height">
    <!-- 渲染表头 -->
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
      <!-- 自定义插槽 -->
      <template slot-scope="scope">
        <slot :column="column" :scope="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    rowKey: {
      type: String,
      required: true
    },
    height: {
      type: String,
      default: 'auto'
    }
  }
}
</script>

在这个示例中，我们创建了一个名为`CustomTable`的组件。它接受`tableData`、`columns`、`rowKey`和`height`作为props，分别表示表格数据、表格列配置、行数据的唯一标识以及表格的高度。

在模板中，我们使用`el-table`和`el-table-column`来渲染Element UI的表格。我们使用了`v-for`指令来循环渲染表格列，并通过`slot-scope`来传递数据给插槽。插槽可以在父组件中定义，并在插槽中使用自定义的组件来渲染表格单元格内容。

通过这种方式，我们可以在父组件中使用这个封装的自定义表格组件，并通过插槽来定制表格的内容和样式。

希望这个简单的示例能帮助到你进行Vue基于Element UI Table的二次封装。如果有任何问题，请随时提问。