【vue3+ts后台管理】用户列表查询、编辑

最新推荐文章于 2024-03-13 16:49:22 发布

AI_boom

最新推荐文章于 2024-03-13 16:49:22 发布

阅读量1.6k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Android_boom/article/details/126951509

版权

本文介绍了如何在Vue3+TS的后台管理系统中实现用户列表的查询和编辑功能。首先，详细说明了用户列表查询的实现，接着讲解了在表格中添加编辑按钮并弹出Dialog进行编辑的过程，包括在user.ts中新增字段、处理role类型差异以及Dialog的数据绑定。文章还提到了更新用户时遇到的问题和解决方案，以及修复更新后再次打开Dialog角色不显示的bug。最后，作者分享了75道JavaScript高频面试题及答案解析。

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

用户列表查询

用户列表查询和商品列表查询类似，我们稍作修改即可

const onSubmit = () => {let arr: ListInt[] = []//查询条件是否有值if (data.selectData.nickName || data.selectData.role) {if (data.selectData.nickName) {//将过滤出来的数组赋值给arrarr = data.list.filter((value) => {return value.nickName.indexOf(data.selectData.nickName) !== -1})}if (data.selectData.role) {//将过滤出来的数组赋值给arrarr = (data.selectData.nickName ? arr : data.list).filter((value) => {return value.role.find((item)=>{return item.role===data.selectData.role})})}} else {arr = data.list}data.list = arr}//监听筛选的两个属性watch([()=>data.selectData.nickName,()=>data.selectData.role],()=>{if(data.selectData.nickName == '' || data.selectData.role == 0){getUser()}})return {...toRefs(data),onSubmit,}

最低0.47元/天解锁文章