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

最新推荐文章于 2024-08-31 21:52:21 发布

原创

最新推荐文章于 2024-08-31 21:52:21 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

用户列表查询

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

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,}