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('获取图表数据失败！')
        }
      })
    }

感谢您的观看 请多多包涵