问题:
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
}
},