vue2 elementui 案例 没有表头的表格
时间: 2024-12-19 12:17:34 浏览: 16
在Vue 2中结合Element UI,创建一个没有表头的简单表格通常用于展示一些基础的数据列表,比如在一个只读的数据展示页面。以下是简单的步骤和示例代码:
首先,你需要在你的项目中安装Element UI,如果还没有安装,可以使用`npm install element-ui`命令。
```html
<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`来定义表头,所以默认地,表格就是没有表头的。
阅读全文