更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码： https://gitee.com/nbacheng/nbcio-boot
前端代码：https://gitee.com/nbacheng/nbcio-vue.git
在线演示（包括H5） ： http://218.75.87.38:9888
1、官方介绍
TreeSelect 树形选择#
含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能。
由于这个组件是el-tree和el-select的结合体，他们的原始属性未被更改，故不在此重复。请跳转查看原组件的相应文档。
介绍的比较简单，同时例子也比较简单
2、网上相对完整的介绍有
el-tree-select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| selectParams | el-select组件的相关参数Select Attributes | boolean / string / number/function | — | — |
| 1.styles | styles参数对el-select设置style | Object | — | — |
| 2.selectClass | 对el-select设置class | String | — | — |
| treeParams | el-tree组件的相关参数Tree Attributes | boolean / string / number/function | — | — |
| 1.clickParent | treeParams.clickParent | Boolean | true 允许点击父级关闭弹出框; false 只能点击子级关闭弹出框 | false |
| 2.filterable | 搜索框参数 | Boolean | — | — |
| popover 参数 | 对应：popper-class | String | — | — |
el-tree-select 取消el-select和el-tree中的参数
| el-select 取消参数 | 取代参数 |
| multiple | 改为内置，通过v-model类型判断是否多选 |
| filterable | filterable=“false” 搜索从弹出框里面执行 |
| el-tree 取消参数 | 取代参数 |
| show-checkbox | :show-checkbox="selectParams.multiple"使用下拉框参数multiple 判断是否对树进行多项 |
| node-key | propsValue,自动获取treeParams.props.value |
| draggable | 设置draggable=“false” 屏蔽拖动 |
el-tree-select Events
| 事件名称 | 说明 | 回调参数 |
| select-clear | 下拉框清空事件 | this.$emit(‘select-clear’) |
| removeTag | 移除单个标签，返回所有勾选的ids，以及当前移除的tag（可能为中文）标签 | this.$emit(‘removeTag’,ids,tag) |
| node-click | 树点击,和el-tree参数一致 | this.$emit(‘node-click’, data, node, vm) |
| check | 勾选触发,和el-tree参数一致 | this.$emit(‘check’,data, node, vm) |
| treeDataUpdateFun | 树更新数据 | this.post(url,postobj,response=>{this.$refs.treeSelect.treeDataUpdateFun(response.data);}) |
| searchFun | 参数: keywords | searchFun(value){// 如果是本地过滤 this.$refs.treeSelect.$refs.tree.filter(value);// 可以直接访问方法，也可以拿到 $refs.tree this.$refs.treeSelect.filterFun(val);// 如果是请求后台：this.post(url,postobj{keywords:value},response=>{this.$refs.treeSelect.treeDataUpdateFun(response.data);});} |
| filterFun | 参数: 本地过滤树 | this.$refs.treeSelect.filterFun(val); |
但有些还是需要自己进行调试确认，也不一定全对
3、实际的例子
刚好做流程图选择部门需要，所以就用了它的这个组件，代码如下：
<div v-if="dataType === 'DEPTS'" style="width: 100%;"> <el-tree-select v-model="deptIds" :data="deptTreeData" :props="{ value: 'id', label: 'label', children: 'children'}" show-checkbox default-expand-all multiple clearable checkStrictly :checkedKeys="deptIds" @check="nodeClick" > </el-tree-select> </div>
主要的nodeClick代码如下
const nodeClick = (data, node, vm) => { const checkedIds = JSON.parse(JSON.stringify(node.checkedNodes)) console.log("nodeClick checkedIds",checkedIds) let groups = null; let text = null; deptIds.value = checkedIds; console.log("checkedDeptChange checkedIds",checkedIds) if (checkedIds && checkedIds.length > 0) { userTaskForm.value.dataType = 'DEPTS'; groups = checkedIds?.map(k => k.id).join() || null; console.log("checkedDeptChange groups",groups) text = checkedIds?.map(k => k.label).join() || ''; console.log("checkedDeptChange text",text) } else { userTaskForm.value.dataType = ''; multiLoopType.value = 'Null'; } userTaskForm.value.candidateGroups = groups; userTaskForm.value.text = text || ''; updateElementTask(); changeMultiLoopType(); }
4、效果图如下：
