截图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.table-wrap {
position: relative;
width: 800px;
}
.table-heading {
position: fixed;
width: 800px;
padding-right: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="app">
<div class="table-wrap" ref="tableWrap">
<el-table ref="table" :data="tableData" :span-method="arraySpanMethod" border max-height="400">
<el-table-column prop="name" label="姓名" fixed width="200">
<template slot-scope="{row}">
<span :id="row.id" :class="{'table-heading': row.isTitle, 'padding-right': '20px'}"
:style="headingStyle(row.id)">{{row.name}}</span>
<span style="display: block; width: 10px;" :style="{height: headingHeight[row.id] + 'px'}"></span>
</template>
</el-table-column>
<el-table-column prop="amount1" label="写作时间" width="200">
</el-table-column>
<el-table-column prop="amount2" label="作者" width="200">
</el-table-column>
<el-table-column prop="amount3" label="章数" width="200">
</el-table-column>
<el-table-column prop="amount4" label="写作背景" width="200">
</el-table-column>
<el-table-column prop="amount5" label="写作地点" width="200">
</el-table-column>
</el-table>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: [
{
id: 'oldTestament',
isTitle: true,
name: '《旧约》包括摩西律法书、历史书、诗歌智慧书、大小先知书共三十九卷。历时一千五百多年，作者身份包括君王、宰相、祭司、先知、牧人等等。'
},
{
name: '律法书',
amount1: '-',
amount2: '摩西',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
name: '历史书',
amount1: '-',
amount2: '-',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
name: '诗歌智慧书',
amount1: '-',
amount2: '大卫、所罗门、摩西、亚萨、可拉后裔、希幔、以探……',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
name: '先知书',
amount1: '-',
amount2: '以赛亚、耶利米、以西结、但以理、何西阿、约珥、阿摩司、俄巴底亚、约拿、弥迦、那鸿、哈巴谷、西番雅、哈该、玛拉基……',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
id: 'newTestament',
isTitle: true,
name: '《新约》包括四福音书、教会历史书、使徒书信、启示文学共二十七卷。历时几十年。作者身份包括税吏、医生、渔夫、律法师……'
},
{
name: '福音书',
amount1: '-',
amount2: '马太、马可、路加、约翰。',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
name: '教会历史书',
amount1: '-',
amount2: '路加',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
name: '使徒书信',
amount1: '-',
amount2: '保罗、彼得、约翰、犹大、雅各……',
amount3: '-',
amount4: '-',
amount5: '-'
},
{
name: '启示文学',
amount1: '-',
amount2: '约翰',
amount3: '-',
amount4: '-',
amount5: '-'
}
],
tableScrollTop: 0,
headingHeight: {},
}
},
methods: {
// 合并表头
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (row.isTitle) {
return [1, 5];
}
},
headingStyle(id) {
const tableWrap = this.$refs.tableWrap
const dom = document.getElementById(id)
if (dom && dom.offsetTop && tableWrap && tableWrap.offsetHeight) {
if ((dom.offsetTop - this.tableScrollTop < tableWrap.offsetTop + 40) || (dom.offsetTop - this.tableScrollTop > tableWrap.offsetTop + tableWrap.offsetHeight - 20)) {
return { color: 'transparent' }
} else {
this.$set(this.headingHeight, id, dom.offsetHeight)
return { transform: `translateY(-${this.tableScrollTop}px)` }
}
}
},
},
mounted() {
this.$nextTick(() => {
// 监听table滚动
const tableDom = this.$refs.table
if (tableDom && tableDom.bodyWrapper) {
tableDom.bodyWrapper.addEventListener('scroll', () => {
console.log(tableDom.bodyWrapper.scrollTop)
this.tableScrollTop = tableDom.bodyWrapper.scrollTop
})
}
})
}
})
</script>
</body>
</html>
网友评论