vue+element-ui项目在表格的列中处理并展示复杂数据（数组）

总是以问题为中心。

问题背景：

在vue+element-ui项目中，以表格形式呈现数据很容易，el-table,el-table-column两个标签加上：data,prop,slot-scope三个用来绑定数据的属性就能解决好多问题了。

 

问题描述：

系统用户user，每个user可能有多个角色role，user中有一个属性为数组roles，封装所有的role。

将每一个user（对应一行数据）的所有role都呈现出来，也就是将数组roles的每一个元素都呈现出来，要怎么做呢？

 

问题分析：

如果是简单数据可以直接使用el-table-column标签的prop属性，但是user的roles是一个数组，不能使用此方法，只能使用template以及slot-scope来处理。

现在的问题是如何在模板中将数组中的元素按特定需求全部展现出来？

 

解决方案：

1.可以通过el-select标签，利用其multiple属性将user的roles中的所有role展现出来，但是看起来会比较奇怪，而且role是对象，包含id和name，直接呈现会出现奇怪的问题，需要进一步处理（将所有role的id提取出来封装起来，绑定）才能使用此方法。

2.或者通过v-for以及ul、li对roles进行遍历，并展示name。相关代码如下：

效果图如下：