elementplus表格的插槽

ElementPlus 是 Vue 3 的 UI 组件库，其表格组件（`<el-table>`）提供了丰富的功能和可扩展性。表格在 Element Plus 中使用了插槽（slots）来支持自定义内容和布局。插槽是用于复用和扩展组件内部结构的一种机制，你可以通过插槽在特定位置插入自定义的 HTML 或组件。

在 `<el-table>` 中，主要的插槽包括：

1. **header**: 在表头区域放置内容，可以通过 `header-cell` 或 `header` 的插槽来覆盖默认的表头单元格样式或添加额外的表头行。

<template>
  <el-table :header="customHeader">
    <el-table-column type="index"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      customHeader: {
        // 使用 slot 重写默认表头
        default: () => (
          <template #default>
            <template #header-cell slot-scope="{ $index, column }">
              <!-- 自定义表头内容 -->
              <span>{{ $index + 1 }}</span>
            </template>
          </template>
        ),
      },
    };
  },
};
</script>

2. **body**: 在表格主体区域插入数据项的内容，可以使用 `cell` 插槽来修改每个单元格的样式或行为。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名">
      <template #cell="scope">
        <!-- 自定义单元格内容 -->
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

3. **footer**: 如果需要在表尾添加总结行或额外的内容，可以使用 `footer` 插槽。

4. **actions**: 可以通过 `action` 插槽在每个行的末尾添加操作按钮或自定义行为。

<template>
  <el-table :data="tableData">
    <el-table-column>
      <template #action="scope">
        <button @click="handleAction(scope.$index)">操作</button>
      </template>
    </el-table-column>
  </el-table>
</template>

使用这些插槽，你可以根据需求定制表格的外观和行为，使其更加灵活和个性化。