vue3 Element-Plus封装的el-tree-select的使用-阿里云开发者社区

vue3 Element-Plus封装的el-tree-select的使用

2024-05-11 21

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3 Element-Plus封装的el-tree-select的使用

更多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();
  }