el-table自定义暂无数据

你可以使用`slot`来自定义`el-table`组件的暂无数据提示。具体步骤如下：

1. 在`el-table`中添加`template`标签，并设置`slot="empty"`，表示当数据为空时，使用该`template`中的内容来渲染暂无数据提示。

2. 在`template`中添加自定义的暂无数据提示内容，可以使用`el-alert`或`el-empty`等组件。

下面是一个示例代码：

<el-table :data="tableData">
  <!-- 自定义暂无数据提示 -->
  <template slot="empty">
    <el-alert
      title="暂无数据"
      type="info"
      :closable="false"
      :center="true">
    </el-alert>
  </template>
  
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

在上面的示例中，当`tableData`为空时，会显示一个蓝色的`el-alert`组件，提示暂无数据。你可以根据自己的需求修改`el-alert`的样式和内容。

相关问题

el-table 自定义表尾

根据提供的引用内容，要自定义el-table的表尾，可以通过以下步骤实现：

1. 在页面部分的el-table标签中，设置ref属性为"tableRef"，并根据需要设置表头和单元格的样式。

2. 在js部分的watch中，监控footerRight数据的变化。

3. 在监控回调函数中，通过this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer')获取到表尾元素。

4. 判断表尾元素是否存在，如果存在，则对表尾元素的每个td进行遍历。

5. 在遍历过程中，通过querySelector获取到每个td的cell元素，并对其进行操作。

6. 可以根据需要设置cell元素的内容，比如使用innerHTML属性设置为需要的文本或元素。

7. 完成对表尾的自定义。

el-table自定义合计

在Element UI库中的`el-table`组件中，如果你想自定义表头的合计功能，你可以通过监听`row-key`列的`sort-change`事件并处理数据来实现。通常，这涉及到以下几个步骤：

1. 定义一个计算总和的函数，这个函数接收一个数组作为参数，用于计算特定列的值之和。

function getTotal(array) {
   return array.reduce((total, item) => total + Number(item), 0);
}

2. 在表格的`header-cell`或`cell`配置项中，添加一个特殊的单元格，当用户对指定列排序时，显示总计结果。你可以设置`formatter`属性来自定义显示的格式。

<template>
  <el-table-column label="合计" align="center">
    <template slot-scope="{ $index, column, rowIndex, row }">
      <span v-if="column.key === 'yourColumnKey'">{{ getTotal(row.yourColumnKeyValues) }}</span>
    </template>
  </el-table-column>
</template>

在这里，你需要将`yourColumnKey`替换为你实际需要汇总的列的键名，并且`yourColumnKeyValues`应该是行数据中对应列的值。