vue.js - 如何从ElementUI表格的scope.row中获取嵌套数据？

Question

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

Answer 1

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

为什么不行呢？
效果图：

html结构

data数据

Answer 2

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

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

假设你的数据结构如下：

{  "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 来访问嵌套属性的值。你可以根据实际情况调整代码来适应你的数据结构和需求。