在Vue项目中利用el-table的render-header属性给el-table重新渲染标题

在一些项目中，可能会要求表格的标题要求可以点击，切换表格的内容，这时可以用el-table的render-header属性来实现，如图：


上代码：

<template>
	<div id="renderHeader">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="日期" width="150">
			</el-table-column>
			<el-table-column label="配送信息" :render-header="renderHeader">
				<el-table-column prop="name" label="姓名" width="120">
				</el-table-column>
				<el-table-column label="地址">
					<el-table-column prop="province" label="省份" width="120">
					</el-table-column>
					<el-table-column prop="city" label="市区" width="120">
					</el-table-column>
					<el-table-column prop="address" label="地址" width="300">
					</el-table-column>
					<el-table-column prop="zip" label="邮编" width="120">
					</el-table-column>
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [
					{
			          date: '2016-05-03',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }
				]
			}
		},
		methods: {
			renderHeader (h, { column, $index }){
				let _this = this
				return h('div',{},[
					h('span',{
						on: {
							'click': function(){
								_this.clickHeader('0')
								console.log(1,this)
							}
						},
						class: 'header',
					},'标题1'),
					h('span',{},'/'),
					h('span',{
						on: {
							'click': function(){
								_this.clickHeader('1')
							}
						},
						class: 'header font-color',
					},'标题2'),
				])
			},
			clickHeader(id){
				let header = document.getElementsByClassName('header');
				for(let i = 0; i < header.length; i++) {
					if(header[i].className.indexOf('font-color') > -1){
						header[i].classList.remove("font-color")
					}
				}
				header[id].classList.add("font-color")
				if (id == '0') {
					this.tableData = [
						{
				          date: '2016-05-03',
				          name: '王小虎',
				          province: '上海',
				          city: '普陀区',
				          address: '上海市普陀区金沙江路 1518 弄',
				          zip: 200333
				        }
					]
				}
				if (id == '1') {
					this.tableData = [
						{
				          date: '2019-10-24',
				          name: '李小虎',
				          province: '北京',
				          city: '顺河区',
				          address: '北京市顺河区金沙江路 1518 弄',
				          zip: 12345
				        }
					]
				}
			}
		}
	}
</script>
<style type="text/css">
	#renderHeader .el-table th .cell .header{
		cursor: pointer;
	}
	#renderHeader .el-table th .cell .font-color{
		color:red;
	}
</style>