vue3：el-table怎么在表格中加空白一行

在 Vue3 中，要在 `el-table` 表格中添加空白行，你可以通过 `span-methods` 配置项结合自定义的 `row-class-name` 或者直接操作数据数组来实现。这里有两个常见的方式：

**方法一：使用 span-methods 和 row-class-name**

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod">
    <!-- 其他表头、列等配置 -->
    <el-table-column type="index"></el-table-column>
    <!-- 添加空白行的列，比如添加一个占位列 -->
    <el-table-column label="占位" width="100px" />
  </el-table>
</template>

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

const tableData = ref([
  // ...正常的数据
]);

// 自定义方法判断是否需要插入空白行
function objectSpanMethod({ row, column, rowIndex }) {
  if (rowIndex % 2 === 0) { // 每隔一行添加一个空白行
    return { rowspan: 2 };
  }
  return {};
}

// 如果想给空白行添加样式
const rowClassName = (row, index) => {
  if (!row.data) { // 判断是否为空白行
    return 'empty-row';
  }
  return '';
};
</script>

<style scoped>
.empty-row {
  /* 可以为空白行设置特定的样式 */
  background-color: #f5f5f5;
}
</style>

**方法二：直接操作数据数组**

在数据加载完成或更新时，在数据数组中手动添加空白行，然后使用 `v-for` 渲染。

<template>
  <el-table :data="tableData" :key="item.id">
    <!-- ...其他配置 -->
  </el-table>
</template>

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

const tableData = ref([]);

// 在计算属性里添加空白行
const formattedTableData = computed(() => {
  const result = [];
  for (let i = 0; i <= tableData.value.length; i++) {
    if (i !== tableData.value.length) {
      result.push(tableData.value[i]);
    } else {
      result.push(null); // 或者你可以创建一个空的对象 {}
    }
  }
  return result;
});
</script>