权限勾选,校验

校验

主要是在添加用户角色的时候,赋予角色至少一个角色

<el-tree
            ref="roleTree"
            :data="permission"
            show-checkbox
            node-key="id"
            highlight-current
            :props="defaultProps"
            :default-checked-keys="permissionIdslist"
          >
</el-tree>

采用的是element ui中的tree树状结构

var validateRoles = function (rule, value, callback) {

  let result = this.getCheckedNodes()

  if (!result && !this.isClose) {

    callback(new Error('请选择分配权限'))

    return

  }

  callback()

}

//正则

 rules: {

        permissionIds: [

          {

            required: true,

            validator: (...arg) => {

              this.validateRoles(...arg)

            },

          },

        ],

      },

获取tree已经勾选的节点(确定添加时,调用此方法)

 getCheckedNodes() {
      //获取的是选中节点对应的id组成的字符串
      return this.$refs.roleTree
        .getCheckedNodes(false, true)
        .map(data => data.id)
        .join(',')
    },

添加,编辑时的初始化

//添加时的初始化

 //调用一下validateRoles,否则点击勾选的时候,...apply的错

    validateRoles,

    initData(val) {

      if (val.id) {

        for (let key in val) {

          this.$set(this.CurObject, key, val[key])

        }

        //请求详情信息,拿到用户已经选择的权限

        roleDetail({ roleId: val.id }).then(res => {

          //先清空

          this.CurObject.permissionIds = ''

          this.permissionIdslist = []

          this.CurObject.permissionIds = res.data.permissions

            .map(item => item.id)

            .join(',')

          this.permissionIdslist = res.data.permissions.map(item => item.id)

          // this.$nextTick(() => {//这种写法,有bug,点击第一次回显的数据不全

          //   this.$refs.roleTree.setCheckedNodes(this.permissionIdslist, true)

          // })

        })

      } else {

        this.CurObject = {

          name: '',

          remark: '',

          permissionIds: '',

        }

        this.permissionIdslist = []

      }

    },