如题,返回的数据中内含外键关联组成的列表,比如一个部门有多个人,将所有人和部门组成键值对,形成字典,返回数据以后,渲染出现问题,
决绝方案:
在el-table-column里添加遍历,如下
<el-table-column prop="Dis_Size" label="磁盘大小" >
<template slot-scope="scope">
<div>
<li v-for="item in scope.row.Dis_Size">
{% verbatim %}{{ item.Size }}{% endverbatim %}
</li>
</div>
</template>
</el-table-column>
可以看代码分析一下各个代码含义,
{% verbatim %}{% endverbatim %}
这个是django才添加的,{{}}会被django接管,所以要添加这个,保证传递到vue
Dis_Size格式,
Dis_Size:[{'Size': 100}, {'Size': 100}, {'Size': 40}]
Dis_Size:[{'Size': 100}, {'Size': 100}, {'Size': 40}]
Dis_Size:[{'Size': 200}, {'Size': 50}, {'Size': 40}]