要将element-ui的Table表格变成左右结构,并将表头放在最左边,可以使用以下方法:
1. 使用CSS将表格的布局变为左右结构
在table的外层容器上,设置display:flex,将其子元素水平排列,并使用flex:1将表格和表头分别占据左右两个区域。
例如:
.table-container {
display: flex;
width: 100%;
height: 100%;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
2. 将表头移动到最左边
element-ui的表头是由TableColumn组件构成的,可以通过自定义该组件的render方法来调整表头的位置。
在TableColumn的render方法中,使用v-show将表头内容隐藏。然后在最左侧添加一个固定宽度的单元格,作为表头的占位符。
例如:
<el-table-column prop="name" label="姓名" width="100" :render-header="renderHeader">
</el-table-column>
methods: {
renderHeader(h, {column}) {
// 隐藏表头内容
= ;
= '';
// 返回一个自定义的表头单元格
return h('el-table-column', {props: {width: '50'}}, );
}
}
完整的示例代码如下:
<template>
<div class="table-container">
<el-table class="left" :data="tableData" style="width:100%">
<el-table-column prop="name" label="姓名" width="100" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="age" label="年龄" width="100">
</el-table-column>
</el-table>
<el-table class="right" :data="tableData" style="width:100%">
<el-table-column prop="job" label="职业" width="100">
</el-table-column>
<el-table-column prop="address" label="地址" width="200">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '张三',
age: 24,
job: '工程师',
address: '北京市海淀区'
}, {
name: '李四',
age: 28,
job: '设计师',
address: '上海市浦东新区'
}, {
name: '王五',
age: 32,
job: '销售员',
address: '广州市天河区'
}]
}
},
methods: {
renderHeader(h, {column}) {
// 隐藏表头内容
= ;
= '';
// 返回一个自定义的表头单元格
return h('el-table-column', {props: {width: '50'}}, );
}
}
}
</script>
<style>
.table-container {
display: flex;
width: 100%;
height: 100%;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
</style>