vue表格中prop获取的数据为数组情况下的遍历

最新推荐文章于 2023-11-28 14:10:06 发布

LifeBackwards

最新推荐文章于 2023-11-28 14:10:06 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： vue.js prop 数组

本文链接：https://blog.youkuaiyun.com/daodaipsrensheng/article/details/120799660

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中，利用prop接收并处理数组数据，通过formatter函数对表格列的角色名称进行格式化，实现列表渲染。重点展示了如何遍历数组并使用join方法连接角色名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue prop 会接收不同的数据类型，其中包含： Number, String, Boolean, Array, Function, Object

渲染列表数据时，table表格属性中的prop获取到的数据是一个数组，可使用formatter来格式化数据

数据渲染：

<el-table-column label="角色" key="roles" prop="roles" width="120" :formatter="rolesData" />

JS代码：

    //遍历table中roles数组
    rolesData(row){
        let arr = []
        row.roles.forEach((item, index)=>{
            arr.push(item.roleName);
        })
        if (index > 2) {
          return
        }
        return arr.join(',')
    }