el-talbe如何在打印的时候，每页都能有表头?

el-table，为了实现表头的效果，将表头和内容放在了两个 div 里面。所以打印的时候只能首页有表头，那么该如何实现呢？

1. 通过检查找到 el-talbe 最外层 div 的 class ，（el-table__header-wrapper）

2. 给 <el-talbe></el-table> 设置一个ref，这里起名叫 mytable。

3. 找到 thead 对应的 dom 节点，这里需要注意一下，由于vue采用的是虚拟dom，所以，想获取节点需要些在nextTick里面。

      X 错误写法 ↓

mounted：{
	let thead = this.$refs.mlytable.$el.querySelector('el-table__header-wrapper thead')  //找到dom节点
    console.log(thead) //打印一下查看，发现是个空标签，是因为虚拟dom的缘故。需要写在nextTick里面。
}

      √ 正确写法 ↓

mounted：{
    this.$nextTick(()=>{
        let thead = this.$refs.mlytable.$el.querySelector('el-table__header-wrapper thead')  //找到dom节点
    	console.log(thead) //打印一下查看，发现是个空标签，是因为虚拟dom的缘故。需要写在nextTick里面。
    })
}

4. 克隆一份 thead，然后将克隆的 thead 放到 tbody 中。同理，需要查找 tbody 对应的 div 的 class 。（el-table__body-wrapper）

mounted：{
    this.$nextTick(()=>{
        let thead = this.$refs.mlytable.$el.querySelector('el-table__header-wrapper thead')  //找到dom节点
    	let theadNew = thead.cloneNode(true)
        this.$refs.mlytable.$el.querySelector('el-table__body-wrapper table').appendChild(theadNew)
    })
}

5. 此时，已经有连个表头了。在正常显示的时候，需要把新加的表头隐藏掉。

.el-table >>> .el-table__body-wrapper table thead{
    display:none
}

6. 通过媒体查询，在打印的时候，让新表头显示出来，旧表头隐藏掉。

需要查询一下隐藏之前，新表头的 display 值是什么（table-header-group），让新表头显示的时候会用到。

@media print{
	.el-table >>> el-table__header-wrapper{
    	display:none
	}
    .el-table >>> .el-table__body-wrapper table thead{
    	display:table-header-group
	}
}

好啦，到这里就已经解决啦！

但是呢，如果项目中多个地方用到这种发放的话，最好把它封装一下。

1. 起一个文件名叫 el-table.js ，然后在 main.js 中引入。

import ElTable from './components/el-table.js'
Vue.component('el-table',ElTable)

2. el-table.js

<script>
    import { Table } from 'element-ui';
    export default {
        extends: Table,
        mounted() {
            this.$nextTick(function () {
                let thead = this.$el.querySelector('.el-table__header-wrapper thead');
                let theadNew = thead.cloneNode(true);
                this.$el.querySelector('.el-table__body-wrapper table').appendChild(theadNew);
            })
        },
    }
</script>
<style scoped>
    .el-table >>> .el-table__body-wrapper thead {
        display: none;
    }
    @media print {
        .el-table >>> .el-table__header-wrapper {
            display: none;
        }
        .el-table >>> .el-table__body-wrapper thead {
            display: table-header-group;
        }
    }
</style>

这里只是听大佬讲解做的笔记，分享个大家，一起进步~

大佬的代码在github：sunzsh’s gists · GitHub