vue如何点击确定像后台添加相应的内容

最新推荐文章于 2024-11-11 15:05:16 发布

原创最新推荐文章于 2024-11-11 15:05:16 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何使用ElementUI的Tree组件实现角色权限分配的功能。通过获取半选和全选节点ID，并将其转化为字符串上传至后台，完成权限设置。文章提供了具体的代码示例，包括点击事件绑定、ID获取及数据请求过程。

分配角色：（使用了elementui，上下衔接可能不那么清晰，主要是想告诉大家这件事的思路）
获取点击一二三级id，使用，分割，传入后台
使用到elementui中tree的两个api：
获取半选中的节点id：getCheckedKeys
获取全选中的节点id：getHalfCheckedKeys
最终打到的目的：
在这里插入图片描述

代码部分详解：

给点击确定时绑定点击事件
获取全选和半选的id
将获取的id使用，分割
最后请求数据，上传到后台

    // 点击确定为分配角色添加权限
    async allotRights () {
      const keys = [
        // 获取半选中的节点id
        ...this.$refs.treeRef.getCheckedKeys(),
        // 获取全选中的节点id
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      // 将数组以，分割成字符串
      const idStr = keys.join(',')
      // 请求后台数据,获取roleId，需要在点击分配权限时将获取到的id值保存到data中
      const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
      if (res.meta.status !== 200) {
        return this.$message.error('添加角色权限失败！')
      } else {
        this.TranslateVisible = false
        this.getRolessList()
        return this.$message.success('添加角色权限成功！')
      }
    }