2024年前端最新21(1)，前端大牛熬夜把JavaScript面试题整理成了PDF文档

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 面包屑菜单

items: [

{

href: ‘/roles’,

title: ‘权限管理’

},

{

href: ‘/roles’,

title: ‘角色列表’

}

],

// 所有角色权限列表数据

rolesList: [],

// 表格列

columns: [

{

title: ‘角色名称’,

dataIndex: ‘roleName’

},

{

title: ‘角色描述’,

dataIndex: ‘roleDesc’

}

]

}

},

created () {

this.getRolesList()

},

methods: {

// 获取角色列表

async getRolesList () {

const { data: res } = await getRolesList()

if (res.meta.status !== 200) {

return this.$message.error(‘获取列表失败’)

}

this.rolesList = res.data

}

}

}

效果如下：

我们发现和Element UI区别很大，我们还没写点击展开的扩展行代码，但是表格却已经出现了类似的树结构，并且控制台报错[Vue warn]: Duplicate keys detected: '101'. This may cause an update error.大致意思是说我们表格出现了重复的key，这样会导致更新的问题。

所以我查看了角色接口的数据：

发现他们的children数组（其实就是权限）确实存在key值重复的情况，然后再结合Ant Design Vue官网中的这段

破案了，就是Ant Design Vue的问题。

2.解决children的key值重复问题

---

将角色单独抽离出来，去掉children即可。

代码：

添加角色

3.实现展开行

---

展开行的内容通过expandedRowRender插槽进行插入，详细代码如下：

添加角色

<a-tag closable color=“blue” @close=“(e)=>{removeRightById(e,powerList[index], item1.id)}”>{{item1.authName}}

<a-tag closable color=“green” @close=“(e)=>{removeRightById(e,powerList[index], item2.id)}”>{{item2.authName}}

<a-tag v-for=“(item3) in item2.children” :key=“item3.id” closable color=“orange” @close=“(e)=>{removeRightById(e,powerList[index], item3.id)}”>{{item3.authName}}