javascript - 调用接口数据没成功的渲染在表格上？

Question

<template>
  <!-- <div class="dialog"> -->
    <!-- 控制弹窗显示/隐藏 -->
    <el-dialog v-model="props.visible" v-if="props.visible">
      <div class="dialog_content">
        <div class="dialog_content_title"> {{ props.title }}</div>
        <div class="main">
          <div class="join-detail">
            <div class="table-wrap">
              <el-table v-if="tableData" ref="tableRef" :data="tableData" height="100%" class="custom-table" stripe>
                <el-table-column :label="areaTitleName" prop="areaName" fixed width="130">
</el-table-column>
              </el-table>
              <el-table v-else ref="tableRef" id="tableRef" :data="tableData" height="100%" class="custom-table" stripe> <el-table-column label="计划场次" prop="planSession" sortable="planSession" align="center">
                  <template #default="scope">
                    <span class="area-span">
                      <span
                        :class="data.areaHistoryList[data.areaHistoryIndex].level == 'cq' && !data.areaHistoryList[data.areaHistoryIndex].rankType ? '' : 'area-name'"
                        @click="showConversion(scope.row, '1')">{{ scope.row.planSession ?? '--' }}</span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="执行场次" prop="executeSession" sortable="executeSession" align="center">
                  <template #default="scope">
                    <span class="area-span">
                      <span
                        :class="data.areaHistoryList[data.areaHistoryIndex].level == 'cq' && !data.areaHistoryList[data.areaHistoryIndex].rankType ? '' : 'area-name'"
                        @click="showConversion(scope.row, '2')">{{ scope.row.executeSession ?? '--' }}</span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="有效场次" prop="validSession" sortable="validSession" align="center">
                  <template #default="scope">
                    <span class="area-span">
                      <span
                        :class="data.areaHistoryList[data.areaHistoryIndex].level == 'cq' && !data.areaHistoryList[data.areaHistoryIndex].rankType ? '' : 'area-name'"
                        @click="showConversion(scope.row, '3')">{{ scope.row.validSession ?? '--' }}</span>
                    </span>
                  </template>
                </el-table-column>
             
                <el-table-column v-for="(item, index) in tableColumnList" :key="index" :prop="item.prop"
                  :label="item.label" :width="item.width" :sortable="item.sortable" align="center">
                  <template #default="scope">
                    <div class="hb">
                      <span>{{ scope.row[item.prop] || '--' }}</span>
                      <!-- 滑动条 -->
                      <img v-if="item.isArrow && comFun.formatRate(scope.row[item.prop]) > 0"
                        src="@/assets/images/leader-board/up.png" alt="">
                      <img v-if="item.isArrow && comFun.formatRate(scope.row[item.prop]) < 0"
                        src="@/assets/images/leader-board/down.png" alt="">
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="page">
              <el-pagination size="small" layout="prev, pager, next" :total="50" />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  ------------------------------------------------------------------------
 
<script lang="ts" setup>
import { onMounted, ref, defineProps, getCurrentInstance, toRaw } from 'vue';
import Api from "@/assets/Apis/api.js";
import type { dataTypeStore } from '@/stores/business_develop/dataType';
import { useUserStore } from "@/stores/strongfd-board/user-strongfd"
import { reactive } from "vue";
import * as options from './tableOptions.js'
import { result } from 'lodash';
//定义了组件接受的属性
const props = defineProps(
  {
    title: {
      type: String,
      default: ''
    },
    sessionType: {
      type: String,
      default: ''
    },
    planObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false,
    }
 
 
  })
const { proxy } = getCurrentInstance()
const tableColumnList = ref([])
const curSortObj = ref({
  asc: null,
  field: '' //存储当前排序的字段名
})
//存储和显示表格的数据
const tableData = ref([
 
])
const tableRef = ref(null)
const data = reactive({
  areaHistoryList: [0], //用于存储区域历史记录
  areaHistoryIndex: 0,  //录当前区域历史记录的索引位置。
})
// 确保 areaHistoryIndex 不为 undefined
if (data.areaHistoryIndex === undefined) {
  data.areaHistoryIndex = 0;
}
const pageNum = ref(1)
const user = useUserStore()
const fetchData = () => {
  const { dateType, date, level, code } = user.userState
  const { rankType } = data.areaHistoryList[data.areaHistoryIndex]
  const params = {
    rankType: rankType ? rankType : '',
    // endDate: endDate,
    // beginDate: beginDate,
    pageNum: pageNum.value,
    dateType,
    areaLevel: level,
    areaCode: code,
    wjdhType: 'community',
    orderBy: curSortObj.value['field'],
    asc: curSortObj.value['asc'],
  }
  if (user.userState.dateType == 'C') {
    params.beginDate = date[0]
    params.endDate = date[1]
  } else {
    params.dateStr = date
  }
  //区域编码传递参数
  proxy.$post(Api.lightSecond.dataList, params).then(res => {
    tableData.value = res.result.list;
    //2：查看是否有返回至，以及哪些返回值
    console.log( tableData.value)
  });
  
 
 
};
//监听fetchData
proxy.$watch(() => user.userState, fetchData, { deep: true });
const showPlanListDialog = ref(false)
const sessionType = ref('1')
const planName = ref('')
const planObj = ref({})
// 展示场次
const showConversion = (item, type) => {
  debugger
  const { dateType, date, level, code } = user.userState
  if(level == 'cq' && !rankType){
    return
  }else{
    planObj.value = item
    sessionType.value = type
    planName.value = item.areaName + (type == '1' ? '计划场次': type == '2' ? '执行场次' : '有效场次')
    showPlanListDialog.value = true
  }
}
onMounted(() => {
  const init = () => {
 
  tableData.value = []
  
}
  fetchData();
  tableColumnList.value = options.marketingTransfer
  data.areaHistoryList.push({
    level: user.userState.level,
    code: user.userState.code,
    name: user.userState.name
  })
 
});
</script>

这是我运行出来的图

这是我想要的图

希望从接口拿到的数据成功的渲染在表格上面

Answer 1

根据你提供的信息和代码片段，有几个可能的原因导致接口数据没有成功渲染在表格上。以下是一些可能的问题及解决方案：

1. 检查接口返回的数据

首先，确保接口确实返回了你期望的数据格式。你可以通过查看网络请求的响应（通常在浏览器的开发者工具中的Network标签页）来确认这一点。确保res.result.list确实包含了有效的数据，并且这些数据格式与你的<el-table>和<el-table-column>中定义的prop属性相匹配。

2. 验证tableData的数据

在你的代码中，你通过tableData.value = res.result.list;来更新表格数据。确保res.result.list不是undefined或空数组。你可以在赋值后使用console.log(tableData.value)来检查数据是否正确。

3. 检查v-if和v-else的使用

你的代码中使用了v-if="tableData"和v-else来控制<el-table>的渲染。这意味着如果tableData为false、undefined、null、空数组或空对象等“假值”时，表格将不会渲染。由于你默认将tableData设置为空数组[]，这实际上是一个“真值”，因此这个条件应该不是问题。但如果res.result.list是null或undefined，则可能导致问题。

4. 确保el-table的响应性

由于你使用了Vue 3的Composition API，确保你正确地处理了响应性。在你的代码中，tableData已经是一个响应性引用（ref），所以这部分应该是正确的。

5. 检查表格列定义

确保你的<el-table-column>的prop属性与tableData中的对象属性完全匹配（包括大小写）。

6. 异步数据加载

由于你是在onMounted钩子中调用fetchData来获取数据，这意味着数据是异步加载的。如果数据加载和组件渲染之间存在竞争条件，可能会导致在数据到达之前表格就已经渲染了空数据。然而，由于你使用了v-if="tableData"，这实际上应该阻止了这种情况的发生（尽管如之前所述，空数组是“真值”）。

7. 调试和错误处理

在fetchData函数中添加错误处理逻辑，以便在请求失败时能够捕获错误并相应地处理它们。这可以通过在.then()之后添加一个.catch()来实现。

8. 刷新或重新加载数据

如果数据在页面加载后可能发生变化，确保你有一种机制来重新加载或刷新数据。

9. 清理和简化代码

你的代码中有一些可能不必要的复杂性和冗余（如data.areaHistoryList的初始化和处理）。尝试清理和简化代码，以便更容易地找到和解决问题。

结论

最有可能的问题是接口返回的数据不是你期望的格式，或者res.result.list是空的或未定义的。检查这些点，并相应地调整你的代码和请求。如果问题仍然存在，请考虑在控制台中输出更多的调试信息来进一步诊断问题。