elementui表格只有表头显示border

您可以通过以下两种方式解决这个问题：

1. 在样式中添加CSS属性`border-collapse: separate;`，例如：

.el-table__header-wrapper {
  border-collapse: separate;
}

2. 在表格组件上添加属性`border`，例如：

<el-table :data="tableData" border>
  <!-- 表格列定义 -->
</el-table>

这样就可以让表格的边框显示出来了。

相关问题

vue2 elementui 案例 没有表头的表格

在Vue 2中结合Element UI，创建一个没有表头的简单表格通常用于展示一些基础的数据列表，比如在一个只读的数据展示页面。以下是简单的步骤和示例代码：

首先，你需要在你的项目中安装Element UI，如果还没有安装，可以使用`npm install element-ui`命令。

<template>
  <div>
    <el-table :data="items" border>
      <el-row v-for="(item, index) in items" :key="index">
        <!-- 每行数据 -->
        <el-col :span="6">{{ item.column1 }}</el-col> <!-- 列一示例 -->
        <el-col :span="6">{{ item.column2 }}</el-col> <!-- 列二示例 -->
        <!-- 添加更多的列... -->
      </el-row>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { column1: '内容1', column2: '内容2' }, // 数据数组
        // 更多数据...
      ]
    };
  }
};
</script>

在这个例子中，`items`是一个对象数组，每个对象代表一行，你可以根据需要添加更多列。由于我们没有使用`el-table-column`来定义表头，所以默认地，表格就是没有表头的。

elementui表格按人员合并表头

ElementUI表格可以通过设置`span-method`属性来实现按人员合并表头。具体实现方法如下：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },        { name: '王五', age: 22, address: '广州市天河区' },
        { name: '赵六', age: 24, address: '深圳市南山区' }
      ]
    }
  },
  methods: {
    handleEdit(index, row) {
      // 编辑操作
    },
    handleDelete(index, row) {
      // 删除操作
    },
    // 合并表头
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

在上述代码中，`spanMethod`方法用于合并表头，通过判断当前列是否为第一列，以及当前行是否为偶数行，来决定是否需要合并单元格。具体的合并方式可以通过返回一个对象来实现，其中`rowspan`表示需要合并的行数，`colspan`表示需要合并的列数。