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

问题描述

对于我的 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中的数组对象。

解决方法

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

它是这样工作的：

  <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