Vue3+Ts element-plus table下拉嵌套echarts展开loading问题
给loading绑定后台返回数据的唯一 id 判断他在数组中的有无来进行loading的展示
// 通过获取数据的唯一标识 id 的下标来控制 loading 的显示
<template #default="props">
<el-button-group>
<el-button type="primary" size="small" @click="handleInitEcharts(props.row.id, 7)">7日 </el-button>
<el-button type="primary" size="small" @click="handleInitEcharts(props.row.id, 30)">30日 </el-button>
</el-button-group>
<div class="board" target="board" v-loading="tmp.indexOf(props.row.id) !== -1">
<div :id="'callCount' + props.row.id" class="callCount"></div>
<div :id="'addWechatCount' + props.row.id" class="addWechatCount"></div>
<div :id="'failureInformation' + props.row.id" class="failureInformation"></div>
</div>
</template>
在onMounted中调用queryData() 根据后台返回的值来进行id的单独存储 (这里存的id是渲染表格的id)
state.tmp = data.map((item: any) => item.id)
每次点击下拉表格时进行查询,如果 tmp 里面有 id 就给他一个空值,如果没有就给他重新赋值
// 展开表格
const handleRowExpand = (row: any, k: number) => { // row 点击行的所有数据 k 展开的行数
// console.log(row.cp)
state.tmp.includes(row.id) ? null : state.tmp.push(row.id)
if (k.includes(row)) {
handleInitEcharts(row.id, 7)
}
}
通过 splice 来把 tmp 中的 id 给去掉,这样就等于 -1 了 loading的 状态就为 false了
const handleInitEcharts = (id: number, num: number) => {
report.handleEchartSeven({ id: id, num: num }).then((res) => {
let { code, data } = res
if (code === 2001) {
initEcharts(data, `callCount${id}`)
initEcharts(data, `addWechatCount${id}`)
initEchartsPie(data, `failureInformation${id}`)
state.tmp.splice(state.tmp.indexOf(id), 1)
} else {
$message.error('获取图表数据失败!')
}
})
}
感谢您的观看 请多多包涵