如何从ElementUI表格的scope.row中获取嵌套数据?

新手上路,请多包涵

elmentui table里的 scope.row如何取下面类型数据结构最内层的数据

  <el-table v-loading="loading" :data="biddingList">
            <el-table-column type="index" label="序号" width="244"/>
            <el-table-column  label="标名称" width="530" align="left">
              <template slot-scope="scope">
                <span>{{scope.row.bidTitle}}</span>
              </template>
            </el-table-column>
            <el-table-column label="截至时间">
              <template slot-scope="scope">
                <span>{{scope.row.endTime}}</span>
              </template>
            </el-table-column>
        </el-table>

1

阅读 328
avatarAI BotBETA

要获取嵌套数据,你需要使用递归的方法来遍历数据结构并访问最内层的数据。由于你的数据结构是嵌套的,因此需要逐层深入访问。

首先,你需要确定数据结构的层级和嵌套关系,以便知道如何正确地访问最内层的数据。在你提供的示例中,数据结构似乎是一个对象,其中包含了一些嵌套的属性。

假设你的数据结构如下:

{
  "id": 1,
  "bidTitle": "标1",
  "endTime": "2023-07-20",
  "nestedData": {
    "innerProp1": "value1",
    "innerProp2": "value2"
  }
}

你可以使用以下方法来获取嵌套数据:

// 假设你的数据存储在名为 data 的数组中
data.forEach(item => {
  const nestedData = item.nestedData; // 获取嵌套数据的对象
  console.log(nestedData); // 输出嵌套数据对象

  // 如果嵌套数据对象包含更多嵌套属性,可以继续递归访问
  // const innerNestedData = nestedData.innerNestedProp;
  // console.log(innerNestedData);
});

在你的 ElementUI 表格中,你可以在 template 中使用 v-if 指令来检查是否存在嵌套数据,并使用相应的逻辑来访问它。以下是一个示例:

<el-table v-loading="loading" :data="biddingList">
  <el-table-column type="index" label="序号" width="244"/>
  <el-table-column label="标名称" width="530" align="left">
    <template slot-scope="scope">
      <span>{{scope.row.bidTitle}}</span>
      <span v-if="scope.row.nestedData">{{scope.row.nestedData.innerProp1}}</span> <!-- 访问嵌套属性 -->
    </template>
  </el-table-column>
  <el-table-column label="截至时间">
    <template slot-scope="scope">
      <span>{{scope.row.endTime}}</span>
    </template>
  </el-table-column>
</el-table>

在上面的示例中,我们使用 v-if 指令来检查 scope.row.nestedData 是否存在。如果存在,我们就可以通过 scope.row.nestedData.innerProp1 来访问嵌套属性的值。你可以根据实际情况调整代码来适应你的数据结构和需求。

1 个回答

没太看懂,是不是要取endTime的值啊,你的endTime是在bidBidding这个对象下,可以使用scope.row.bidBidding.endTime,不知道我理解的对不对

为什么不行呢?
效果图:
1707210276596.png
html结构
image.png
data数据
image.png

推荐问题
宣传栏