vue3+Element多选的弹框+如何获取选中数据以及设置默认勾选

目录

 一：多选弹窗获取数据的实现

二：多选弹窗设置默认勾选的实现

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里面的区别。

这里只需要知道，如果数据已经塞进去了，但是页面仍旧没有呈现默认勾选状态的话，用它把代码包起来，就可以了。