如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。