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

Question

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

Answer 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