antd vue tree获取半选节点以及已选节点

 阅读约 3 分钟

`permissions(row) {

  getRoleTree(row.roleId)
    .then(res => {
      // 获取当前用户角色分配菜单的id data例如:[1002, 1003, 1004, 1213, 1214, 1000, 1001]
      this.checkedKeys = res.data.data
      // 这一步是预防用户不点击节点选项直接保存
      this.menuIds = res.data.data.join(',')
      return getMenuTree()
    })
    .then(response => {
      this.treeData = response.data.data
      this.roleId = row.roleId
      this.permissionsModalVisible = true
    })
}`

`// 点击复选框,获取已经选中的复选项id+半选id
onChangePermissionsTree(node, event) {
  this.menuIds = node.join(',').concat(',').concat(event.halfCheckedKeys.join(','))
},`

` <a-tree
    ref="menuTree"
    v-model="checkedKeys"
    checkable
    :tree-data="treeData"
    :replace-fields="{ key:'id' }"
    @check="onChangePermissionsTree"
  />`
  
  `// 更新权限
permissionsModalSubmit() {
  updPermissions(this.roleId, this.menuIds).then(res => {
    if (res.data.data) {
      resetRouter()
      store.dispatch('GenerateRoutes') // 刷新菜单
      store.dispatch('GetInfo') // 刷新用户权限
      this.permissionsModalVisible = false
      return this.$message.success('保存成功!')
    } else {
      return this.$message.error('保存失败!')
    }
  })
}`
阅读 149发布于 2019-12-25

推荐阅读
目录