如何修改Element UI Vue3表格的无数据提示文本

在向服务器发起请求前，要把Element UI表格的无数据提示改成“Downloading company data...”，可以通过以下两种方式实现：

方法一：通过empty-text属性动态控制 #

直接给表格绑定empty-text属性，用响应式变量控制提示文本内容，请求完成后再根据返回数据更新文本：

<template>
  <el-table
    :data="tableData"
    :empty-text="emptyText"
    border
  >
    <!-- 自定义表格列 -->
    <el-table-column prop="name" label="Company Name" />
    <el-table-column prop="address" label="Registered Address" />
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 表格数据初始为空
const tableData = ref([]);
// 初始提示文本设置为加载中的内容
const emptyText = ref('Downloading company data...');

onMounted(async () => {
  try {
    // 替换为实际的接口请求逻辑
    const res = await fetch('/api/company-list');
    const data = await res.json();
    tableData.value = data;
    
    // 请求成功后，若数据为空则切换提示文本
    if (tableData.value.length === 0) {
      emptyText.value = 'No company data available';
    }
  } catch (err) {
    // 请求失败时更新提示
    emptyText.value = 'Failed to load company data';
  }
});
</script>

方法二：自定义empty插槽（支持加载动画） #

如果需要更灵活的样式（比如添加加载图标），可以使用表格的#empty插槽自定义空状态内容：

<template>
  <el-table
    :data="tableData"
    border
  >
    <!-- 自定义表格列 -->
    <el-table-column prop="name" label="Company Name" />
    <el-table-column prop="address" label="Registered Address" />

    <!-- 自定义空状态插槽 -->
    <template #empty>
      <div class="loading-empty">
        <el-icon size="36" class="loading-icon"><Loading /></el-icon>
        <p>{{ emptyText }}</p>
      </div>
    </template>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Loading } from '@element-plus/icons-vue';

const tableData = ref([]);
const emptyText = ref('Downloading company data...');

onMounted(async () => {
  try {
    const res = await fetch('/api/company-list');
    const data = await res.json();
    tableData.value = data;
    
    if (tableData.value.length === 0) {
      emptyText.value = 'No company data available';
    }
  } catch (err) {
    emptyText.value = 'Failed to load company data';
  }
});
</script>

<style scoped>
.loading-empty {
  text-align: center;
  padding: 50px 0;
  color: #666;
}
.loading-icon {
  margin-bottom: 12px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

两种方法都能实现初始加载时的提示文本修改，插槽方式更适合需要自定义UI的场景，属性方式则更简洁。

内容的提问来源于stack exchange，提问作者Nikita Balashov