【vue3+ts后台管理】用户列表查询、编辑
用户列表查询
用户列表查询和商品列表查询类似,我们稍作修改即可
const onSubmit = () => {
let arr: ListInt[] = []
//查询条件是否有值
if (data.selectData.nickName || data.selectData.role) {
if (data.selectData.nickName) {
//将过滤出来的数组赋值给arr
arr = data.list.filter((value) => {
return value.nickName.indexOf(data.selectData.nickName) !== -1
})
}
if (data.selectData.role) {
//将过滤出来的数组赋值给arr
arr = (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,
}
用户列表编辑
我们在列表最后增加编辑按钮,点击弹出 Dialog,所以我们修改 UserView.vue
先在 table 里增加编辑按钮
<el-table-column prop="introduce" label="操作">
<template #default="scope">
<el-button
type="primary"
size="small"
@click="changeUser(scope.row)">
编辑
</el-button>
</template>
</el-table-column>
然后把 Dialog 自定义内容中第二个对话框的代码复制过来,稍作修改
<el-dialog v-model="isShow" title="编辑信息">
<el-form :model="active">
<el-form-item label="姓名" label-width="50px">
<el-input v-model="active.nickName" autocomplete="off" />
</el-form-item>
<el-form-item label="角色" label-width="50px">
<el-select multiple v-model="active.role" placeholder="Please select a zone">
<el-option
v-for="item in roleList"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="isShow = false">取消</el-button>
<el-button type="primary" @click="updateUser">更新</el-button>
</span>
</template>
</el-dialog>
其中 isShow
为是否展示 Dialog,我们可以在 type 下的 user.ts 中增加一个字段。同时增加 active
字段用来保存选中的对象
interface ActiveInt{
id: number,
nickName: string,
userName: string,
role:number[]
}
export class InitData {
selectData: SelectDataInt = {
role:0,
nickName:''
}
list: ListInt[] = []//接收用户列表,用于展示
roleList:RoleListInt[] = []//接收角色列表,用于搜索选择器
isShow = false//是否展示Dialog
active:ActiveInt = {//保存选中的对象
id: 0,
nickName: '',
userName: '',
role:[]
}
}
其中 Dialog 中的 :model="active"
为 Dialog 中要显示的数据。我们点击编辑按钮,我们修改 isShow
的值,让对话框显示出来,同时传入所点击的这一行的数据,赋值给 data.active
,这样当 Dialog 显示出来的时候里边就会填充要编辑的数据
const changeUser = (row:ListInt)=>{
console.log(row)
data.active = {
id: row.id,
nickName: row.nickName,
userName: row.userName,
role:row.role.map((value)=>value.role)
}
data.isShow = true
}
return {
......
changeUser
}
可以看到在对 active 赋值时,对 role 的赋值进行了一些处理。因为 active.role 的类型我们规定的是数字的数组,和我们传过来的row
中的 role 格式不同,我们先将 传过来的row
打印下 :
对 row.role
我们进行了处理,map()
方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。我们只把 role 返回即可,roleName 我们暂时不需要
然后我们对 Dialog 的按钮进行处理,点击更新执行 updateUser 方法
const updateUser = ()=>{
console.log(data.active);
let obj:any = data.list.find((value)=>value.id==data.active.id)
obj.nickName = data.active.nickName
//data.active.role --> [1,2]
//roleList --> roleId --> 1,2
obj.role = data.roleList.filter(value => data.active.role.indexOf(value.roleId) !== -1)
//console.log(obj.role)
data.isShow = false
}
return {
...toRefs(data),
onSubmit,
changeUser,
updateUser
}
最后我们处理bug,由于更新后 data.list 的 role 结构由 RoleInt 改为了 RoleListInt,所以还需要在展示 Dialog 时对其进行处理,否则编辑后,再打开 Dialog 角色这里就展示不出来了
const changeUser = (row:ListInt)=>{
console.log(row)
data.active = {
id: row.id,
nickName: row.nickName,
userName: row.userName,
role:row.role.map((value:any)=>value.role || value.roleId)
}
data.isShow = true
}
最后运行结果:
转载自:https://juejin.cn/post/7130785683350192135