vue3 vxe-table slots 自定义模版

Vue3 中的 VxeTable 是一款强大的表格组件，它允许用户通过 `slots` (插槽) 功能来自定义表格的各种部分，如表头、行内容、单元格等。`slots` 是 Vue 模板编译的一部分，可以让你在模板中插入自定义的内容。

以下是几个常用的 VxeTable slots 插槽示例：

1. **header**: 在 `<xetable>` 标签内的 `header` slot 可用于定制表头区域的样式和内容。例如：

<xetable>
  <template #header>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </template>
</xetable>

2. **cell**: 这个插槽用来覆盖默认的单元格渲染，你可以在这里提供自定义的单元格模板，比如根据数据动态展示内容。

<xetable>
  <template #cell="{ row, column }">
    <!-- row 和 column 对象提供数据信息 -->
    <span>{{ row[column.property] }}</span>
  </template>
</xetable>

3. **footer**: 如果你想添加底部的内容，比如总计或者分页控件，可以使用 `footer` slot。

<xetable>
  <template #footer>
    <div>Total: {{ totalCount }}</div>
  </template>
</xetable>