首页 > 其他分享 >el-tree数据有部门和用户 提交只选用户

el-tree数据有部门和用户 提交只选用户

时间:2022-10-18 19:57:13浏览次数:45  
标签:el assignForm joinUserNames tree 用户 label id isUser

el-tree数据有部门和用户 提交只选用户

数据结构 其中isUser=true 标识数据是用户

[
    {
      "isUser": false,  
      "id": 199,
      "label": "陕州区", 
      "children": [
        {
          "isUser": true, 
          "id": 1,
          "label": "超级管理员",
          "deptType": null,
          "children": null
        },
        {
          "isUser": true, 
          "id": 102,
          "label": "阿辉", 
          "children": null
        }
      ]
    }
  ]
    <el-dialog :title="assignUserTitle" :visible.sync="assignUserOpen" width="600px" append-to-body>
      <el-form ref="assignForm" :model="assignForm" :rules="rules" label-width="80px">
        <el-form-item label="办理人员" prop="joinUserIds">
          <el-tree
            class="tree-border"
            :data="deptUserOptions"
            show-checkbox
            ref="assignUser"
            node-key="id"
            @check="changeNode"
            :check-strictly="false"
            empty-text="加载中,请稍候"
            :props="defaultProps"
          ></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAssignUserForm">确 定</el-button>
        <el-button @click="cancelAssignUser">取 消</el-button>
      </div>
    </el-dialog>
 methods: {
    // tree组件chang事件
    changeNode(obj, val) {
      // 所有选中ids
      this.assignForm.joinFullIds = val.checkedKeys
      let temp = val.checkedNodes
      let joinUserNames = []
      // 选中的用户ids
      this.assignForm.joinUserIds = []
      temp.map(d => {
        if (d.isUser) {
          joinUserNames.push(d.label)
          this.assignForm.joinUserIds.push(d.id)
        }
      })
      alert(this.assignForm.joinUserIds)
      this.$set(this.assignForm, 'joinUserNames', joinUserNames)
    },
    /** 提交办理人 */
    submitAssignUserForm() {
      this.$refs["assignForm"].validate(valid => {
        if (valid) {
            //addTask后台提交接口
            addTask(this.assignForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
        }
      });
    },
}

标签:el,assignForm,joinUserNames,tree,用户,label,id,isUser
From: https://www.cnblogs.com/zh76412950/p/16803842.html

相关文章