某个项目的特殊需求,首3行均是表头,且为冻结状态(即固定),左边第1列也是固定状态
废话少说,直接上vue源码
<template>
<div class="el-table-wrap">
<el-table :data="tableData" style="width: 100%" height="400" border>
<el-table-column fixed width="150" align="center">
<template slot="header">
<div class="table-header-item">责任区</div>
<div class="table-header-item">表头2</div>
<div class="table-header-item">表头3</div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column width="120" align="center">
<template slot="header">
<div class="table-header-item">东区</div>
<div class="table-header-item">表头2</div>
<div class="table-header-item">表头3</div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column width="120" align="center">
<template slot="header">
<div class="table-header-item">南区</div>
<div class="table-header-item">表头2</div>
<div class="table-header-item">表头3</div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.province }}</span>
</template>
</el-table-column>
<el-table-column width="120" align="center">
<template slot="header">
<div class="table-header-item">西区</div>
<div class="table-header-item">表头2</div>
<div class="table-header-item">表头3</div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.city }}</span>
</template>
</el-table-column>
<el-table-column width="120" align="center">
<template slot="header">
<div class="table-header-item">北区</div>
<div class="table-header-item">表头2</div>
<div class="table-header-item">表头3</div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column width="120" align="center">
<template slot="header">
<div class="table-header-item">表头1</div>
<div class="table-header-item">表头2</div>
<div class="table-header-item">表头3</div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.zip }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-08",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-06",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}
]
};
}
};
</script>
<style >
.el-table-wrap {
width: 600px;
margin: 100px auto 0;
}
.table-header-item {
height: 40px;
line-height: 40px;
width: 100%;
text-align: center;
}
.el-table--border th:first-child .cell,
.el-table--border th .cell {
padding-left: 0;
}
.el-table th>.cell {
padding-right: 0;
}
.el-table th>.cell .table-header-item:nth-child(1),
.el-table th>.cell .table-header-item:nth-child(2) {
border-bottom: 1px solid #dfe6ec;
}
.el-table th>.cell .table-header-item:nth-child(2) {
height: 50px;
line-height: 50px;
}
.el-table th>.cell .table-header-item:nth-child(1) {
line-height: 30px;
}
.el-table th>.cell .table-header-item:nth-child(3) {
line-height: 50px;
}
</style>