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();
});
}
});
},
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了