Vue Js Element UI如何在表格列中呈现数组对象

Posted 2023-02-23

【中文标题】Vue Js Element UI如何在表格列中呈现数组对象

【英文标题】：Vue Js Element UI how to render array object in table column

【发布时间】：2021-07-04 07:51:03

【问题描述】：

对于我的 Vue Js Element UI 代码，我想显示/遍历 el-table-column 中的数组数据，但它没有呈现。字符串数据正确显示仅与数组有关。我也尝试将静态数据放入data() return 方法中，但它对我不起作用。请检查下面我尝试过的代码，

html

<el-table :data="tableData" style="width: 100%">

    <el-table-column prop="module" label="Module">
    </el-table-column>
    <el-table-column prop="status" label="Status">
    </el-table-column>
    <el-table-column prop="downloadfiles" label="Download Files"
                     v-for="(download,index) in tableData[0].downloadfiles[0]">
      <el-table-column label="File" :prop="download.file"></el-table-column>
      <el-table-column label="Path" :prop="JSON.stringify(download, property:'path')"></el-table-column>
    </el-table-column>
  </el-table>

脚本

data () 
    return 
      tableData: [
        "module": 'Order',
        "status": "Ok",

        "downloadfiles":
          [
            "file": "test_20210406080352.zip",
            "path": "/opt/var/log/download/"
          ,
            
              "file": "New_20210406080352.zip",
              "path": "/opt/var/log/download/"
            ]
      ],
    
  

我尝试以两种方式解析下载节点数据，但两种解决方案都不适合我。请帮我如何遍历el-table-column中的数组对象。

【问题讨论】：

你好，你可以看看这个问题，***.com/questions/63099065/…

@YashMaheshwari 我已经检查了这个解决方案，但它对我不起作用

【参考方案1】：

您在tableData[0].downloadfiles[0] 此处选择downloadfiles 数组中的第一项，而您不应该这样做。

它是这样工作的：

  <el-table-column
    prop="downloadfiles"
    label="Download Files"
    v-for="(d, i) in tableData[0].downloadfiles" 
    :key="i"
  >
    <el-table-column label="File">
       d.file 
    </el-table-column>
    <el-table-column label="Path">
       d.path 
    </el-table-column>
  </el-table-column>

完整示例here

如果您不需要使用子列，那么解决方案是在表格列中使用作用域插槽。

例如：

  <el-table-column label="Download Files">
    <template slot-scope="props">
      <div
        v-for="(f, i) in props.row.downloadfiles"
        :key="i"
      >
        <el-link
          :href="f.path + f.file"
          icon="el-icon-download"
          type="primary"
        >
          f.file
        </el-link>
      </div>
    </template>
  </el-table-column>

完整示例here

【讨论】：

谢谢，这个解决方案对我有用。接受这个作为答案:)