element plus一个表头两列
时间: 2023-07-18 16:27:35 浏览: 123
您可以使用 Element Plus 的表格组件来实现一个表头两列的效果。具体操作步骤如下:
1. 在 HTML 页面中引入 Element Plus 的 CSS 和 JavaScript 文件。
2. 定义一个表格组件,并设置表头和表格数据,如下所示:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 },
],
};
},
};
</script>
```
3. 在 CSS 中设置表头的样式,使其占据两列,如下所示:
```css
.el-table__header th:nth-child(1) {
width: 50%;
}
.el-table__header th:nth-child(2) {
width: 50%;
}
```
这样就可以实现一个表头两列的效果了。
阅读全文