下拉框可筛选可树状多选组件

news2024/11/25 20:36:22

实际效果图片
在这里插入图片描述在这里插入图片描述

父页面

<el-form-item label="转发:" :label-width="formLabelWidth" class="formflex_item">
              <el-select ref="select" :clearable="true" @clear="clearSelect" @remove-tag="removeTagChange"  v-model="addForm.departmentList" placeholder="请选择" multiple collapse-tags style="width:220px">
                <el-popover
                  placement="right"
                  width="400"
                  trigger="click"
                  v-model="popover"
                >
                <div class="outer-container" @click="SelectVisible">
                  <div class="inner-container">
                      <div class="sel-input">
                        <el-input
                          placeholder="输入关键字进行过滤"
                          v-model="filterTextAll"
                          size="mini"
                          @click="intClick"
                          ref="inputRef"
                        >
                          <i slot="suffix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                      </div>
                      <div class="repeatUserStyle">
                        <span>公司成员</span>
                      </div>
                      <!-- <el-option hidden v-for="item in branchList" :key="item.id" :value="item.id" :label="item.name+'——'+item.deptName" style="height: auto" /> -->
                      <el-tree
                        class="filter-tree"
                        :data="branchList2"
                        :props="defaultProps"
                        node-key="id"
                        show-checkbox
                        default-expand-all
                        :expand-on-click-node="true"
                        :filter-node-method="filterNodeAll"
                        @check-change="handleCheckChange"
                        @node-click="handleNodeClick"
                        @check="handleCheckClick"
                        ref="tree1"
                      >
                        <span slot-scope="{ data }">
                          <span>{{ data.deptName !== "全选" ? data.name+'——'+data.deptName : data.name}}</span>
                        </span>
                      </el-tree>
                    </div>
                  </div>
                  <div slot="reference" class="btnStyle">
                    <el-button size="mini">点击选择公司成员</el-button>
                  </div>
                </el-popover>

                <div class="sel-input">
                  <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText"
                    size="mini"
                  >
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                  </el-input>
                </div>
                <div class="repeatUserStyle">
                  <span>常用转发人</span>
                  <el-tooltip class="item" effect="dark" content="点击添加常用转发人" placement="right">
                    <i class="el-icon-plus  cursor_pointer" @click="handleSetForwarderList"></i>
                  </el-tooltip>
                </div>
                <el-option hidden v-for="item in branchList" :key="item.id" :value="item.id" :label="item.name+'——'+item.deptName" style="height: auto" />
                  <el-tree
                    class="filter-tree"
                    :data="roleBoolean === true ? receiverList : forwardList2"
                    :props="defaultProps"
                    node-key="id"
                    show-checkbox
                    :default-expand-all="roleBoolean === true ? false : true"
                    :expand-on-click-node="true"
                    :filter-node-method="filterNode"
                    @check-change="handleCheckChange"
                    ref="tree"
                  >
                    <!-- :check-strictly="systemNodeFlag" -->
                  </el-tree>
              </el-select>
            </el-form-item>

代码部分

export default {
  data() {
    return {
	   	  filterText: "",
	      filterTextAll: "",
	      defaultProps: {
	        value: "id",
	        label: "name"
	      },
	      // 常用转发人数据
	      forwardList2: [{
	        id: "全选",
	        name: "全选",
	        string: "常用转发人",
	        deptName: "全选",
	        children: []
	      }],
	      branchList2: [{
	        id: "全选",
	        name: "全选",
	        string: "公司成员",
	        deptName: "全选",
	        children: []
	      }],
	      selectedData: [], // 选中的节点
			receiverList: [{
	        id: "全选",
	        name: "市局领导",
	        string: "常用转发人",
	        deptName: "全选",
	        children: []
	      },{
	        id: "全选",
	        name: "部门领导",
	        string: "常用转发人",
	        deptName: "全选",
	        children: []
	      },{
	        id: "全选",
	        name: "县局领导",
	        string: "常用转发人",
	        deptName: "全选",
	        children: []
	      },{
	        id: "全选",
	        name: "其他",
	        string: "常用转发人",
	        deptName: "全选",
	        children: []
	      }]
	    };
	},
	computed: {
   	 	...mapGetters(["permission", "userInfo"]),
  	},
  	watch: {
	    objId(newVal) {
	      console.log(this.objId);
	      this.fileParams.objectId = newVal;
	    },
	    //常用转发人,通过监听方式来代替focus(),
	    //this.$refs.tree.filter(val);触发el-tree的filterNode过滤属性
	    filterText(val) {
	      this.$refs.tree.filter(val);
	    },
	    //
	    filterTextAll(val) {
	      this.$refs.tree1.filter(val);
	    },
	    // 过滤
	    filterNode(value, data) {
	      console.log("filterNode",value)
	      if (!value) return true;
	      return data.name.indexOf(value) !== -1;
	    },
	    filterNodeAll(value, data) {
	      if (!value) return true;
	      let filterRes = data.name.indexOf(value) !== -1 || data.deptName.indexOf(value) !== -1;
	      return filterRes
	    },
	     // 点击tree组件的复选框节点触发
    handleCheckChange(data,checked) {
      if(checked === true) {
        if(data.id !== "全选") {
          this.addForm.departmentList.push(data.id)
          if(this.addForm.departmentList)
          this.SetArray(this.addForm.departmentList)
          this.$refs.tree.setChecked(data.id, true)
          this.$refs.tree1.setChecked(data.id, true)
        } else {
          // 解决过滤全选后的bug
          if(data.string === "常用转发人") {
            let checkKeys = this.$refs.tree.getCheckedKeys()
            checkKeys.forEach((i, n) => {
              let node = this.$refs.tree.getNode(i)
              if(!node.visible && node.checked) {
                this.$refs.tree.setChecked(i, false)
              }
            })
          } else {
            let checkKeys = this.$refs.tree1.getCheckedKeys()
            checkKeys.forEach((i, n) => {
              let node = this.$refs.tree1.getNode(i)
              if(!node.visible && node.checked) {
                this.$refs.tree1.setChecked(i, false)
              }
            })
          }
        }
        // this.$refs.tree.
      } else {
        if(this.addForm.departmentList.includes(data.id)) {
          this.addForm.departmentList.forEach((item, index, arr) => {
            if(item === data.id) {
              arr.splice(index, 1)
            }
          })
          this.$refs.tree.setChecked(data.id, false)
          this.$refs.tree1.setChecked(data.id, false)
        }
      }

      // if(data.id !== "全选") {
      //   this.$refs.select.toggleMenu()
      // } else {
      //   this.popover = false
      // }
    },
    // 下拉框清除项触发
    removeTagChange(val) {
      this.$refs.tree.setChecked(val, false)
      this.$refs.tree1.setChecked(val, false)
      this.$refs.select.blur()
      this.popover = false
    },
    // 点击删除全部
    clearSelect() {
      this.$refs.tree.setCheckedKeys([])
      this.$refs.tree1.setCheckedKeys([])
      this.addForm.departmentList = []
      this.popover = false
    },
    intClick() {
      this.$refs.inputRef.focus()
    },
    // 去重
    SetArray(arr) {
      this.addForm.departmentList = Array.from(new Set(arr))
    },
    // 添加常用转发人
    handleSetForwarderList() {
      this.dialogTableVisible = false
      this.popover = false
      this.$refs.select.blur()
      let id = this.$store.getters.userInfo.user_id
      this.formInline={
          companyId:"",
            deptId:"",
            realName:"",
            roleId:""
        };
        getForwarderList(id, this.formInline1).then(res => {
          this.forwarder.forwarderList = res.data.data;
          this.forwarder.forwarderModel = true;
          this.forwarder.userName = "";
          this.forwarder.id = id;
          this.forwarder.selectionList = [];
        })
      this.getCompanyDept()
    },
    getCompanyDept(){
      let vm = this
      companyOrDept(vm.formInline1.companyId).then(res =>{
        if(vm.formInline1.companyId === "" || vm.formInline1.companyId === null){
          vm.companyList = res.data.data;
          let col = {
            id: "",
            deptName: ""
          };
          vm.companyList.unshift(col);
          vm.deptList = [];
          vm.formInline1 = {
            companyId:"",
            deptId:"",
            realName: vm.formInline1.realName,
            roleId:vm.ids,
          }
        }else {
          vm.deptList = res.data.data;
          let col = {
            key: "",
            name: ""
          };
          vm.deptList.unshift(col);
        }
      });
    },
    //条件查询未添加到转发人员的列表
    searchForwarderList(){
      let that = this;
      getForwarderList(that.forwarder.id, that.formInline1).then(res => {
        that.forwarder.forwarderList = res.data.data;
      }).then(() => {
        //将已选择的数据选中
        for(var i=0;i<that.forwarder.forwarderList.length;i++){
          that.forwarder.selectionList.forEach(function(item){
            if(item.id === that.forwarder.forwarderList[i].id){
              that.$refs.table.toggleRowSelection(that.forwarder.forwarderList[i],true);
            }
          })
        }
      });
    },
    //添加转发人员
    addForwarder(){
      let that = this;
      //将已选人员id拼接
      var idList = "";
      that.forwarder.selectionList.forEach(function(item){
        idList = idList + item.id + ",";
      })
      addForwarder(that.forwarder.id, idList).then(res => {
        that.forwarder.forwarderModel = false;
        this.getForwardList()
        this.getCode()
        that.$message({
          type: "success",
          message: "操作成功!"
        });
      });
    },
    //selection状态修改(取消、选中)
    forwarderChange(selection, row){
      let that = this;
      //判断该数据是选中还是取消
      if(that.forwarder.selectionList == [] || that.forwarder.selectionList == undefined || that.forwarder.selectionList == null){
        that.forwarder.selectionList = [];
        that.forwarder.selectionList.push(row);
        return;
      }
      var i = 0;
      for(; i < that.forwarder.selectionList.length; i++){
        if(row.id == that.forwarder.selectionList[i].id){
          break;
        }
      }
      if(i == that.forwarder.selectionList.length){
        that.forwarder.selectionList.push(row);
      }else{
        if(that.forwarder.selectionList.length == 1){
          that.forwarder.selectionList = [];
        }else{
          that.forwarder.selectionList.splice(i, 1);
        }
      }
    },
    //全选未添加转发人员
    selectAll(selection){
      let that = this;
      if(selection != undefined){
        that.forwarder.selectionList = [];
        if(selection != []){
          that.forwarder.forwarderList.forEach(function(item){
            that.forwarder.selectionList.push(item);
          })
        }
      }
    },
    SelectVisible() {
      this.$refs.select.toggleMenu()
      this.$refs.inputRef.focus()
    },
    handleNodeClick() {
      this.$refs.select.toggleMenu()
    },
    handleCheckClick() {
      this.$refs.select.toggleMenu()
    },
    // 获取转发人权限
    getRole() {
      // 获取转发人的权限
      let userRoles = JSON.parse(localStorage.getItem("saber-userDetails")).content.roleAlias
      userRoles = userRoles.split(',')
      let roleArr = ['ROLE_COMPANY_BOSS','admin','ROLE_COMPANY_CS','ROLE_DEPART_BOSS']
      this.roleBoolean = userRoles.some(item => {
        return roleArr.includes(item) === true
      })
      if(this.roleBoolean === true) {
        this.getRolesList()
      }
    },
    getRolesList() {
      getReceiverList().then(res => {
        let obj = res.data.data
        this.receiverList[0].children = obj.市局领导
        this.receiverList[1].children = obj.部门负责人
        this.receiverList[2].children = obj.县局领导
        this.receiverList[3].children = obj.其他
      }).catch(() => {
        this.$message.error('获取常用转发人数据失败!')
      })
    }
  },
  },
	

拆分的组件:

<template>
  <div>
    <!-- 树形下拉框 -->
    <el-select style="width: 100%" ref="select" :multiple="multiple" :clearable="true" @remove-tag="handleRemoveTag" @clear="handleClear" v-model="companyId">
        <div class="sel-input">
            <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            size="mini"
            >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <el-option v-if="mineStatusValue.length == 0" hidden key="id" :value="selectVal" :label="selectName"></el-option>
        <el-option v-else hidden v-for="(item, index) in mineStatusValue" :key="index" :label="parentLableVisble ? (item.parentLable + '——' + item[defaultProps.label]) : item[defaultProps.label]" :value="item[defaultProps.id]"></el-option>
        <el-tree
            :data="receiverList"
            :props="defaultProps"
            :node-key="defaultProps.id"
            :show-checkbox="multiple"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            @check="handleCheckChange"
            @node-click="clickUnitTreeNode"
            ref="tree"
        >
        </el-tree>
    </el-select>
  </div>
</template>

<script>
export default {
    props: {
        // 树形结构数据
        receiverList: {
            type: Array,
            require: true,
            default: () => []
        },
        // 树形结构默认配置
        defaultProps: {
            type: Object,
            default: () => {
                return {
                    children: 'children',
                    label: 'label',
                    id: 'id'
                }
            }
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        // selectInput绑定的值
        companyId: {
            type: [Array, String, Number],
            default: ''
        },
        // 是否变成特殊结构:"XX"——"XX"
        parentLableVisble: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    data () {
        return {
            filterText: '',
            mineStatusValue: []
        }
    },
    methods: {
        // 树形结构数据过滤
        filterNode(value, data) {
            if (!value) return true;
            return data[this.defaultProps.label].indexOf(value) !== -1;
        },
        // 多选方法
        handleCheckChange(data) {
            if(!this.multiple) {
                return
            }
            let res = this.$refs.tree.getCheckedNodes(true)
            let key = this.$refs.tree.getCheckedKeys(true)
            this.mineStatusValue = res;
            // 全选 全选这里有个bug 记得在外面写方法是时候写一个去重方法
            if(data.children && data.children.length > 0) {
                data.children.forEach(items => {
                    let a = this.mineStatusValue.some(item => item.value === items.value)
                    if(a) {
                        this.$emit('handleCheckChange', key, items)
                        return
                    }
                    this.handleRemoveTag(items.value)
                })
                return
            }
            let a = this.mineStatusValue.some(item => item.value === data.value)
            if(a) {
                this.$emit('handleCheckChange', key, data)
                return
            }
            this.handleRemoveTag(data.value)
        },
        handleRemoveTag(value) {
            this.$refs.tree.setChecked(value, false);
            let res = this.$refs.tree.getCheckedNodes(true)
            this.mineStatusValue = res;
            this.$emit('handleRemoveTag', value)
        },
        handleClear() {
            if(this.multiple) {
                this.$refs.tree.setCheckedKeys([]);
            }
            this.mineStatusValue = []
            this.$emit('handleClear')
        },
        handleSelect(value) {
            this.$refs.tree.setCheckedKeys(value)
            let res = this.$refs.tree.getCheckedNodes(true)
            this.mineStatusValue = res;
        },
        // 单选方法
        clickUnitTreeNode(data) {
            if(this.multiple) {
                return
            }
            if(data && !data.children) {
                if(this.mineStatusValue.length === 0 || !(this.mineStatusValue.some(item => item.value === data.value))) {
                    this.mineStatusValue.push(data)
                }
                this.$emit('clickUnitTreeNode', data)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.sel-input {
    margin: 5px;
}
::v-deep.el-select .el-tag__close.el-icon-close {
    background-color: #C0C4CC;
    right: -7px;
    top: -6px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/785098.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day2 驱动开发 c语言

通过驱动开发给pcb板子点灯。 u-boot已经提前移植到了emmc中。 灯也是一种字符型设备。 编程流程需要先注册设备&#xff0c;然后创建结点&#xff0c;然后操作电灯相关寄存器 应用层直接调用read write来打开字符设备进行操作。 这样写会造成无法处理内核页面请求的虚拟地址…

SpringBoot中java操作excel【EasyExcel】

EasyExcel 处理Excel&#xff1b;简单记录&#xff0c;方便日后查询&#xff01; 官方文档&#xff1a; Easy Excel (alibaba.com) 一、EasyExcel概述 Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套…

前端食堂技术周刊第 91 期:2023 npm 状态、TC39 会议回顾、浏览器中的 Sass、React 18 如何提高应用程序性能

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;茶椰生花 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…

js基础-练习三

九九乘法表&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthsc, initial-scale1.0"><title>九九乘法表</title><style&g…

5.9 Bootstrap 警告框(Alert)插件

文章目录 Bootstrap 警告框&#xff08;Alert&#xff09;插件用法选项方法事件 Bootstrap 警告框&#xff08;Alert&#xff09;插件 警告框&#xff08;Alert&#xff09;消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框&#xff08;Alert&#xff09;插件…

基于 Flink SQL CDC 数据处理的终极武器

文章目录 一、传统的数据同步方案与 Flink SQL CDC 解决方案1.1 Flink SQL CDC 数据同步与原理解析1.2 基于日志的 CDC 方案介绍1.3 选择 Flink 作为 ETL 工具 二、 基于 Flink SQL CDC 的数据同步方案实践2.1 CDC Streaming ETL2.2 Flink-CDC实践之mysql案例 来源互联网多篇文…

Redis—分布式系统

Redis—分布式系统 &#x1f50e;理解分布式&#x1f50e;分布式—应用服务与数据库服务分离引入更多的应用服务节点理解负载均衡 引入更多的数据库服务节点缓存分库分表 微服务 &#x1f50e;常见概念应用(Application) / 系统(System)模块(Module) / 组件(Component)分布式(D…

nvm 安装 Node 报错:panic: runtime error: index out of range [3] with length 3

最近在搞 TypeScript&#xff0c;然后想着品尝一下 pnpm&#xff0c;但是 pnmp 8.x 最低需要 Node 16.x&#xff0c;但是电脑上暂时还没有该版本&#xff0c;通过 nvm list available 命令查看可用的 Node 版本&#xff1a; nvm list available# 显示如下 | CURRENT | …

【C++进阶】:继承

继承 一.继承的概念和定义1.概念2.定义 二.基类和派生类对象赋值转换三.继承中的作用域四.派生类的默认成员函数五.继承与友元六.继承与静态成员七.复杂的菱形继承及菱形虚拟继承1.二义性2.原理 八.总结 一.继承的概念和定义 1.概念 继承(inheritance)机制是面向对象程序设计使…

虚拟文件描述符VFD

瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;14 文档用途 了解VFD 详细信息 1.相关数据类型 typedef struct vfd{int fd; /* current FD, or VFD_CLOSED if non…

23 自定义控件

案例&#xff1a;组合Spin Box和Horizontal Slider实现联动 新建Qt设计师界面&#xff1a; 选择Widget&#xff1a; 选择类名&#xff08;生成.h、.cpp、.ui文件&#xff09; 在smallWidget.ui中使用Spin Box和Horizontal Slider控件 可以自定义数字区间&#xff1a; 在主窗口w…

第17章 常见函数

创建函数 第一种格式采用关键字function&#xff0c;后跟分配给该代码块的函数名。 function name {commands }第二种 name() { commands }你也必须注意函数名。记住&#xff0c;函数名必须是唯一的&#xff0c;否则也会有问题。如果你重定义了函数&#xff0c;新定义会覆…

【时间复杂度】

旋转数组 题目 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 /* 解题思路&#xff1a;使用三次逆转法&#xff0c;让数组旋转k次 1. 先整体逆转 // 1,2,3,4,5,6,7 // 7 6 5 4 3 2 1 2. 逆转子数组[0, k - 1] // 5 6 7 4 3…

C语言基本结构:顺序、选择和循环

文章目录 前言顺序结构代码讲解 选择结构代码讲解 循环结构总结 前言 在计算机编程中&#xff0c;掌握基本的编程结构是非常重要的。C语言作为一种广泛应用的编程语言&#xff0c;具有丰富的基本结构&#xff0c;包括顺序结构、选择结构和循环结构。这些基本结构为开发人员提供…

RocketMQ主从集群broker无法启动,日志报错

使用vmWare安装的centOS7.9虚拟机&#xff0c;RocketMQ5.1.3 在rocketMQ的bin目录里使用相对路径的方式启动broker&#xff0c;jps查询显示没有启动&#xff0c;日志报错如下 排查配置文件没有问题&#xff0c;nameServer也已经正常启动 更换绝对路径&#xff0c;启动broker&…

flutter:animate_do(flutter中的Animate.css)

简介 做过web开发的应该大部分人都知道Animate.css&#xff0c;它为开发者提供了一系列预定义的动画效果&#xff0c;可以通过简单的CSS类来实现各种动画效果。而animate_do 相当于flutter中的Animate.css,它提供了很多定义好的动画效果 基本使用 官方地址 https://pub-web.…

一文学会redis在springBoot中的使用

“收藏从未停止&#xff0c;练习从未开始”&#xff0c;或许有那么一些好题好方法&#xff0c;在被你选中收藏后却遗忘在收藏夹里积起了灰&#xff1f;今天请务必打开你沉甸甸的收藏重新回顾&#xff0c;分享一下那些曾让你拍案叫绝的好东西吧&#xff01; 一、什么是redis缓存…

【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程

【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程 文章目录 【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程Anaconda31.安装Anaconda32.卸载Anaconda33.修改Anaconda3安装虚拟环境的默认位置 安装PyTorch3d确定版本对应关系源码编译安装Pytorch3d 总…

Day 65: 集成学习之 AdaBoosting (3. 集成器)

代码&#xff1a; package dl;import java.io.FileReader; import weka.core.Instance; import weka.core.Instances;/*** The booster which ensembles base classifiers.*/ public class Booster {/*** Classifiers.*/SimpleClassifier[] classifiers;/*** Number of classi…

解决报错:Can‘t connect to HTTPS URL because the SSL module is not available.

本人今天准备打开安装一个label-studio包&#xff0c;试了很多次&#xff0c;接连报如下错误&#xff0c;因此我就去找了一些解决方案&#xff0c;现在总结如下&#xff1a; 1、报错信息如下 2、解决方案如下&#xff1a; github上有对应的解决方案&#xff0c;链接&#xff…