element的表头无法更新问题，数据确实更新了

问题：

element的表头是从后端动态拿的，第一次渲染没有问题，可是再根据不同的条件查询的时候，传参不同，意味着返回的表头不同，这个时候，数据从后端其实已经拿到了，但是页面视图就是无法更新，真的恶心坏了，试验了很多种方法，包括使用key啊什么，都不行，最终找到一个间接解决的方案，即：使用v-if的方法，让DOM重新渲染。

解决：

原来的代码：

				<el-table
						v-loading="isLoading"
						:data="tableData"
						border
						:row-class-name="tableRowClassName"
						style="min-height: 60px;"
					>
						<template>
							<el-table-column
								v-for="(head,index) in tablehead"
								:key="'col-index-' + index"
								v-bind="head"
								align="center"
								:label="head.label"
							>
								<template
									v-if="head.tips"
									#header
								>
									<el-tooltip
										:content="head.tips"
										placement="top"
									>
										<span>
											{{ head.label }}
											<i
												class="el-icon-info"
												style="margin-left:3px;"
											></i>
										</span>
									</el-tooltip>
								</template>
							</el-table-column>
						</template>

					</el-table>

改成后的代码：

		<el-table
						v-loading="isLoading"
						:data="tableData"
						border
						:row-class-name="tableRowClassName"
						style="min-height: 60px;"
					>
						<template v-if="showColumn">
							<el-table-column
								v-for="(head,index) in tablehead"
								:key="'col-index-' + index"
								v-bind="head"
								align="center"
								:label="head.label"
							>
								<template
									v-if="head.tips"
									#header
								>
									<el-tooltip
										:content="head.tips"
										placement="top"
									>
										<span>
											{{ head.label }}
											<i
												class="el-icon-info"
												style="margin-left:3px;"
											></i>
										</span>
									</el-tooltip>
								</template>
							</el-table-column>
						</template>

					</el-table>

js:

		async getTableData() {
			try {
				this.isLoading = true
				this.showColumn = false
				const data = {
					days: this.queryForm.date.join(','),
					appid: this.queryForm.appid.join(','),
					type: this.queryForm.type.join(','),
					adchannelid: this.queryForm.adchannelid.join(','),
					sdkJarVersion: this.queryForm.sdkJarVersion,
					versionName: this.queryForm.versionName,
					subadsenseid: this.queryForm.subadsenseid,
					page: this.pageable.pageNum,
					page_size: this.pageable.pageSize,
					select: this.submitArr.join(','),
				}
				const res = await api.getTableList(data)
				// 表头
				const header = res.meta.header
				let tablehead = []
				tablehead = header.map(item => {
					let itemObj = {}
					itemObj.label = item
					if (item === '填充率') itemObj.tips = '原始请求成功数/原始请求数 * 100 %'
					if (item === '有效展示率') itemObj.tips = '广告有效曝光量/原始请求成功数 * 100 %'
					if (item === '点击率') itemObj.tips = '广告点击量/广告原始曝光量'
					if (item === '原始请求数') itemObj.tips = '客户端发起广告接口请求'
					if (item === '原始请求成功数') itemObj.tips = '在规定时长内客户端收到返回200，广告不为空且数据格式有效'
					if (item === '有效曝光数') itemObj.tips = '广告曝光被认作有效时上报（仅开屏、激励视频、信息流广告必传），开屏业务对应广告曝光1s事件，激励视频业务对应结束播放完成事件'
					if (item === '请求成功率') itemObj.tips = '原始请求成功数/原始请求数'
					if (item === '第三方展示数') itemObj.tips = '竞价展示数+串行展示数'
					if (item === '第三方展示率') itemObj.tips = '第三方展示数/原始请求数'
					if (item === '打底展示率') itemObj.tips = '打底展示数/原始请求数'
					return itemObj
				})
				// 为了解决element表头不更新bug
				setTimeout(()=>{
					tablehead.length && (this.tablehead = tablehead)
					this.showColumn = true
					this.isLoading = false
				}, 50)
				// 漏斗
				this.funnelData = res.meta.funnel
				// 表体
				if (res.data) {
					this.tableData = res.data
				}
				if (!res.data.length && this.pageable.pageNum > 1) {
					this.pageable.pageNum = 1
					this.getTableData()
				}
				this.pageable.total = res.meta.pagination.total
			} catch (e) {
				console.log(e)
				this.tableData = []
				this.isLoading = false
			}
		},