el-tree数据有部门和用户 提交只选用户
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();
});
}
});
},
}