业务需求:题库功能,页面展示选项(直接显示字符串杂乱无章)
业务背景:选项字段存进去前是数组,经过后端json_encode后已字符串存入数据库
后端传来的数据格式:
choices: "[{\"title\":\"1\",\"value\":\"蚂蚁\"},{\"title\":\"2\",\"value\":\"老鼠\"},{\"title\":\"3\",\"value\":\"豹子\"},{\"title\":\"4\",\"value\":\"哈士\"}]"
前端展示:
1.蚂蚁
2.老鼠
3.豹子
4.哈士
前端代码展示:
<el-table-column label="选项"
width="300">
<template slot-scope="scope">
<el-row v-for="(choices,index) in JSON.parse(scope.row.choices)" :key="index">
{{ choices.title }}.{{ choices.value }}
</el-row>
</template>
</el-table-column>
通过拼接展示