目录
element提供了一个组件:
我用它实现了一个简单的弹窗——下面贴一个效果图,以及vue3里面的template部分,和script里面的部分代码:
ps:后端数据库没放多少数据,看起来就像是全选一样…但实际上不是哈…
<!-- 用户角色列表弹窗 -->
<el-dialog title="请选择该角色下的用户" v-model="userListShow" width="500px" :before-close="handleClose">
<div>
<el-table ref="userListRef" :data="userList">
<el-table-column type="selection" width="55" />
<el-table-column prop="user_id" label="ID" />
<el-table-column prop="user_name" label="用户名" />
</el-table>
</div>
<template v-slot:footer>
<div class="dialog-footer" style="text-align:center;padding-top: 20px;">
<el-button @click="userListShow = false">取 消</el-button>
<el-button type="primary" @click="handleConfirmUser">确 定</el-button>
</div>
</template>
</el-dialog>
// 用户角色列表的控制变量
const userListShow = ref(false)
// 角色Id
const roleId = ref()
// 所有的用户
const userList = ref([])
const userListRef = ref()
// 获取该role_id下的所有的用户
const UserByRoleId = ref([])
// 选中的所有的user
const selectUser = ref([])
// 最新拿到的所有的选中的user_id
const selectUserId = ref([])
// 展示弹窗,获取所有用户的id和用户名
const showDialogList = async (role_id) => {
//获取所有用户列表
const res = await userApi.getUserList();
// console.log("获取所有用户列表", res)
if (res.data.code == 200) {
userList.value = res.data.data.data;
} else {
ElMessage.error("获取所有用户列表失败")
}
userListShow.value = true;
roleId.value = role_id;
userListRef.value = userList.value
// 获取该角色下的所有的用户
const ress = await userApi.getUserByRoleId({ role_id: role_id })
console.log("getUserByRoleId", ress)
UserByRoleId.value = ress.data.data
// userListRef.value=resUser.data.data
nextTick(() => {
for (const user in ress.data.data) {
for (const users in res.data.data.data) {
if (res.data.data.data[users].user_id == ress.data.data[user].user_id) {
userListRef.value.toggleRowSelection(userList.value[users], true); // 设置为选中状态
}
}
}
});
};
// 批量角色管理操作
const handleConfirmUser = async () => {
selectUser.value = userListRef.value.getSelectionRows();
// console.log("userListRef.value.getSelectionRows()", userListRef.value.getSelectionRows())
// 处理数据,只要user_id
for (let i = 0; i < selectUser.value.length; i++) {
selectUserId.value[i] = selectUser.value[i].user_id
}
console.log("selectUserId", selectUserId.value)
const res = await userApi.amendRole({ role_id: roleId.value, list: selectUserId.value })
console.log("amendRole", res)
if (res.data.message == 'success') {
ElMessage.info("批量角色管理操作成功")
userListShow.value = false;
} else {
ElMessage.info("批量角色管理操作失败")
}
// 置空数据
selectUserId.value = []
selectUser.value = []
userListRef.value = []
UserByRoleId.value = []
}
接下来我说一下上面代码的一个逻辑:
一:多选弹窗获取数据的实现
我的弹窗用ref绑定了这个table组件:
那么获取它所勾选数据的指令如下:重点就是这个getSelectionRows()方法
selectUser.value = userListRef.value.getSelectionRows();
二:多选弹窗设置默认勾选的实现
承接一下上文,我们先捋一下默认勾选的逻辑:
首先已勾选数据最开始是为空的,也就是说如果想要呈现默认勾选的状态,这个“已勾选数据”里,一开始就得给它塞想要勾选的数据进去。
需要注意的一点是,塞进去的数据内容,必须和勾选后取出来的数据内容一致!
以下是重点代码:
userListRef.value.toggleRowSelection(userList.value[users], true); // 设置为选中状态
这个userList.value[users],就是我想要默认勾选的数据内容。
但是到这一步,页面上也不一定能够成功呈现出默认勾选的状态。
那么接下来,就需要用到一个方法:nextTick()
nextTick(() => {
for (const user in ress.data.data) {
for (const users in res.data.data.data) {
if (res.data.data.data[users].user_id == ress.data.data[user].user_id) {
userListRef.value.toggleRowSelection(userList.value[users], true); // 设置为选中状态
}
}
}
});
};
nextTick的作用就是创建一个异步任务,具体用法这里就不赘述了,可以直接到网上去搜,有相关的讲解,包括它在vue2和vue3里面的区别。
这里只需要知道,如果数据已经塞进去了,但是页面仍旧没有呈现默认勾选状态的话,用它把代码包起来,就可以了。