Vue Js元素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

您在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>

完整示例

若不需要使用子列，那个么解决方案就是在表列中使用作用域槽。

例如：

<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>

完整示例