Vue Js Element UI 如何在 table 列中渲染数组对象

Question

对于我的 Vue Js Element UI 代码，我想 display/traverse 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>

Script

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

您正在此处选择 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

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

例如：

  <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

Vue Js Element UI 如何在 table 列中渲染数组对象

Vue Js Element UI how to render array object in table column

javascript

arrays

vue.js

vue-component

element-ui