el-table-column 使用 v-for 中el-table遍历数某个字段,多层嵌套时处理数组

el-table-column 使用 v-for 中el-table遍历数某个字段,多层嵌套时处理数组

    • 问题:
      • 数据格式
      • 页面效果
      • 代码实现

问题:

数据本身是一个对象列表,每个对象中的optionList属性又是对象列表,如何取出并将optionList保存到同一个单元格并实现换行展示,及对象列表中对象字段的循环取出

数据格式

{
	"rows": [
		{
			"rewardPoints": 50,
			"imageUrl": "0",
			"optionList": [
				{
					"code": 1,
					"option": "A"
				},
				{
					"code": 2,
					"option": "B"
				},
				{
					"code": 3,
					"option": "C"
				},
				{
					"code": 4,
					"option": "D"
				}
			],
			"updatedBy": "han",
			"updatedTime": "2021-02-05"
		},
		{
			"rewardPoints": 50,
			"imageUrl": "0",
			"optionList": [
				{
					"code": 1,
					"option": "A"
				},
				{
					"code": 2,
					"option": "B"
				},
				{
					"code": 3,
					"option": "C"
				},
				{
					"code": 4,
					"option": "D"
				}
			],
			"updatedBy": "han",
			"updatedTime": "2021-02-05"
		},
		{
			"rewardPoints": 50,
			"imageUrl": "0",
			"optionList": [
				{
					"code": 1,
					"option": "A"
				},
				{
					"code": 2,
					"option": "B"
				},
				{
					"code": 3,
					"option": "C"
				},
				{
					"code": 4,
					"option": "D"
				}
			],
			"updatedBy": "han",
			"updatedTime": "2021-02-05"
		}
	]
}

页面效果

在这里插入图片描述

代码实现

		
          
          

          
            
          
        

你可能感兴趣的:(vue.js,vue)