elementUI - 折叠以及多选的组件

在这里插入图片描述

//子组件
<template>
  <!-- 左侧第二个 -->
  <div class="left-second-more">
    <div class="layer-list-wrapper1">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="(item,index) in leftSelectMoreArr" :key="index+1" :name="item.nameNumber">
          <template slot="title">
            <div class="left-title">
              <div class="left-icon" v-if="item.textName">{{ item.textName }}</div>
              <div class="left-name">{{item.name}}（{{item.numData}}个）</div>
            </div>
            <i class="iconfont" :class="judgeActive('1')!=-1? 'icon-bofang-copy-copy':'icon-bofang'"></i>
          </template>
          <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(itemVal,indexVal) in item.stationArr" :key="indexVal+1" :label="itemVal.stationLabel">
              {{ itemVal.stationName }}
              <span :class="itemVal.stationType==1?'check-handwork':'check-auto'">{{itemVal.stationType==1?'手工':"自动"}}</span>
            </el-checkbox>
          </el-checkbox-group>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
    
    <script>
export default {
  components: {},
  props: {
    leftSelectMoreArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      checkList: [],
      activeNames: [],
      differentData: [],
      isFlag: false,
      stationType: "",
      numberVal1: 0,
      numberVal2: 0,
      numberVal3: 0,
    };
  },
  created() {
    if (this.leftSelectMoreArr.length > 0) {
      this.activeNames = [this.leftSelectMoreArr[0].nameNumber];
      if (this.leftSelectMoreArr[0].stationArr.length > 0) {
        this.leftSelectMoreArr[0].stationArr.forEach((ele) => {
          this.checkList.push(ele.stationLabel);
        });
        this.stationType = this.leftSelectMoreArr[0].nameNumber;
      }
    }
    this.$emit("getTreeVal", this.checkList, this.stationType);
  },
  watch: {
    checkList(newVal, oldVal) {
      this.differentData = this.getDifferentData(newVal, oldVal);
      let length1 = newVal.length;
      let length2 = oldVal.length;
      if (length1 > length2) {
        this.isFlag = true; //说明是新增
      } else {
        this.isFlag = false; //说明是减少
      }
      // this.$emit("getTreeVal", this.checkList, this.stationType);
    },
    stationType(newVal, oldVal) {},
  },
  mounted() {},
  methods: {
    handleChange(val) {},
    handleCheckedCitiesChange(val) {
      this.$emit("getTreeVal", this.checkList, this.stationType);
    },
    //判断是否打开
    judgeActive(data) {
      return this.activeNames.indexOf(data);
    },
    // 获取两个数组中不同的值
    getDifferentData(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    // 数组去重
    removeDuplicates(array) {
      return [...new Set(array)];
    },
    // 比较两个数组是否有相同数据，有的话则去掉
    removeCommonElements(arr1, arr2) {
      return arr1.filter(
        (item) => !arr2.some((otherItem) => otherItem === item)
      );
    },
  },
};
</script>
    
<style lang="scss">
.left-second-more {
  .layer-list-wrapper1 {
    height: calc(100% - 22px);
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    // overflow: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;

    .el-collapse {
      width: 100%;
      border: 0;
      color: #4b4b4b;
      //   overflow: auto;
      .el-collapse-item {
        margin-bottom: 12px;
      }
      .el-collapse-item__header {
        width: 100%;
        height: 60px;
        background: #f8f9ff;
        border-bottom: none;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        padding: 0 16px;
        .el-collapse-item__arrow {
          display: none;
        }
        .left-title {
          display: flex;
          align-items: center;
          .left-icon {
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border-radius: 500000px;
            background: #e1e6f0;
            color: #303133;
            font-size: 14px;
            margin-right: 12px;
          }

          .left-name {
            color: #303133;
            font-weight: 700;
          }
        }
        .iconfont {
          font-size: 10px;
        }
      }
      .el-collapse-item__header:hover {
        background: #3886ff;
        border-radius: 4px;
        .left-title {
          .left-icon {
            border-radius: 4px;
            background: #fff;
            color: #0064ff;
          }

          .left-name {
            color: #fff;
            font-weight: 700;
          }
        }
        .iconfont {
          color: #fff;
        }
      }
      .is-active {
        background: #3886ff !important;
        border-radius: 4px;
        .left-title {
          .left-icon {
            border-radius: 4px;
            background: #fff;
            color: #0064ff;
          }

          .left-name {
            color: #fff;
            font-weight: 700;
          }
        }
        .iconfont {
          color: #fff;
          transform: rotate(90deg);
        }
      }
      .el-collapse-item__content {
        padding: 2px 16px;
        border-left: 1px solid #e1e6f0;
        border-right: 1px solid #e1e6f0;
        border-bottom: 1px solid #e1e6f0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        margin-bottom: 12px;
      }
      .el-collapse-item:last-child {
        .el-collapse-item__wrap {
          border: 0;
          .el-collapse-item__content {
            margin-bottom: 0px;
          }
        }
      }
    }
    /* 设置滚动条的样式 */
    .el-collapse::-webkit-scrollbar {
      width: 0px;
      height: 0;
    }
    .el-checkbox-group {
      .el-checkbox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 0;
        .el-checkbox__input {
          height: 14px;
         
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #3886ff;
        }
        .el-checkbox__label {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 0;
          //   margin-bottom: 24px;
          color: #606266;
          line-height: 14px;
          margin-left: 12px;
          img {
            width: 20px;
            // height: 20px;
            margin-right: 8px;
          }
          .check-handwork {
            width: 44px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            display: block;
            margin-left: auto;
            border-radius: 4px;
            background: #3886ff1a;
            border: 1px solid #3886ff;
            color: #3886ff;
          }
          .check-auto {
            width: 44px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            display: block;
            margin-left: auto;
            border-radius: 4px;
            background: #70c4221a;
            border: 1px solid #70c422;
            color: #70c422;
          }
        }
        // .el-checkbox__label:hover{
        //   color: #3886ff;
        // }
      }
      .el-checkbox:hover{
        .el-checkbox__input{
          .el-checkbox__inner{
            border-color: #3886ff;
          }
        }
        .el-checkbox__label{
          color: #3886ff;
        }
      }
      .el-checkbox:last-child {
        .el-checkbox__label {
          margin-bottom: 0px;
        }
      }
    }
  }
}

.layer-list-wrapper1::-webkit-scrollbar {
  display: none;
}
.el-checkbox {
  line-height: 27px;
}
</style>

//父组件
 <leftSelectMore v-if="leftSelectMoreFlag" :leftSelectMoreArr="leftSelectMoreArr" @getTreeVal='getSingleVal'></leftSelectMore>
 
import leftSelectMore from "@/components/leftSelect/leftSelectMore.vue";

components: { leftSelectMore },
data() {
    return {
  		  leftSelectMoreArr: [
        {
          name: "省控断面",
          numData: "1",
          nameNumber: 1,
          stationArr: [
            {
              stationName: "桥1",
              stationLabel: 1,
              stationType: 1, //1是手工，2是自动
            },
            {
              stationName: "桥2",
              stationLabel: 2,
              stationType: 2, //1是手工，2是自动
            },
          ],
        },
        {
          name: "市控断面",
          numData: "1",
          nameNumber: 2,
          stationArr: [
            {
              stationName: "桥3",
              stationLabel: 3,
              stationType: 1, //1是手工，2是自动
            },
            {
              stationName: "桥4",
              stationLabel: 4,
              stationType: 2, //1是手工，2是自动
            },
          ],
        },
      ],
       leftSelectMoreFlag: true,
    }
},
methods: {
    // 点击了左侧的哪一个选项
    getSingleVal(val, stationType) {
    	console.log("选中的")
    }
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

分享一个比较好用的在线串口调试助手

分享一个比较好用的在线串口调试助手

web在线调试助手 链接地址如下&#xff1a; 在线串口调试在线串口调试助手 Online serial port debugging assistanthttps://www.bbaiot.com/
阅读更多...
QT treeWidget如何添加虚线

QT treeWidget如何添加虚线

1、添加以下代码即可&#xff1a; ui.treeWidget->setStyle(QStyleFactory::create("windows"));2、效果如下&#xff1a;
阅读更多...
文件夹加密软件哪个好用？文件加密的4个必备方法（2024）

文件夹加密软件哪个好用？文件加密的4个必备方法（2024）

如果您的电脑上有重要的个人或商业内容&#xff08;例如知识产权&#xff09;&#xff0c;您可能想知道如何确保数据的安全。如果笔记本电脑丢失或被盗&#xff0c;他人可能会访问硬盘驱动器的内容&#xff0c;从而获取到您的个人隐私信息。因此&#xff0c;通过文件夹加密软件…
阅读更多...
LLM主要类别架构

LLM主要类别架构

LLM主要类别架构介绍 LLM主要类别 LLM本身基于transformer架构。自2017年&#xff0c;attention is all you need诞生起&#xff0c;transformer模型为不同领域的模型提供了灵感和启发。基于原始的Transformer框架&#xff0c;衍生出了一系列模型&#xff0c;一些模型仅仅使用e…
阅读更多...
【YOLOv5进阶】——模型结构与模型原理YOLOv5源码解析

【YOLOv5进阶】——模型结构与模型原理YOLOv5源码解析

一、基础知识 1、backbone backbone是核心组成部分&#xff0c;主要负责提取图像特征。具体来说&#xff0c;backbone通过一系列的卷积层和池化层对输入图像进行处理&#xff0c;逐渐降低特征图的尺寸同时增加通道数&#xff0c;从而保留和提取图像中重要的特征。这些提取出的…
阅读更多...
标准发布 | 废水处理减污降碳协同评估指南（碳中和标准）

标准发布 | 废水处理减污降碳协同评估指南（碳中和标准）

本文件主编单位&#xff1a;北京林业大学、北京交通大学、中国电建集团华东勘测设计研究院有限公司、 眉山市城投中恒能环保科技有限公司、 中华环保联合会水环境治理专业委员会。 本文件参编单位&#xff1a;中国市政工程中南设计研究总院有限公司、湖北君集环境科技股份有 公…
阅读更多...
新型的余热回收系统为印染行业的节能减排助力

新型的余热回收系统为印染行业的节能减排助力

上海国际纺织机械展会上,一款新型的余热回收系统引起了印染界大佬们的关注。我国是纺织大国,纺织行业是我国的重要支柱产业。作为传统的能耗大户,印染行业能源消耗占非常高,尤其是定型机能耗。在能源价格不断上涨和环保要求日益严格的背景下,降低定型机能耗、提高能源利用效率成…
阅读更多...
【Spring Cloud Alibaba】服务注册与发现+远程调用

【Spring Cloud Alibaba】服务注册与发现+远程调用

目录 注册微服务到Nacos&#xff08;服务提供者&#xff09;创建项目修改依赖信息添加启动注解添加配置信息启动服务&#xff0c;Nacos控制台查看服务列表 注册微服务到Nacos&#xff08;服务消费者&#xff09;创建项目添加依赖信息添加启动注解添加配置信息启动服务&#xff…
阅读更多...
学生信息管理系统C++

学生信息管理系统C++

设计目的 使学生进一步理解和掌握课堂上所学的面向对象C编程知识&#xff0c;巩固和加深学生对C面向对象课程的基本知识的理解和掌握。掌握C面向对象编程和程序调试的基本技能&#xff0c;学会利用C语言进行基本的软件设计&#xff0c;着重提高运用C面向对象语言解决实际问题的…
阅读更多...
生成式 AI——ChatGPT、Dall-E、Midjourney 等算法理念探讨

生成式 AI——ChatGPT、Dall-E、Midjourney 等算法理念探讨

1.概述 艺术、交流以及我们对现实世界的认知正在迅速地转变。如果我们回顾人类创新的历史&#xff0c;我们可能会认为轮子的发明或电的发现是巨大的飞跃。今天&#xff0c;一场新的革命正在发生——弥合人类创造力和机器计算之间的鸿沟。这正是生成式人工智能。 生成模型正在模…
阅读更多...
【遂愿赠书 - 1期】：安恒“网安三剑客”-大模型时代下的网络安全实战指南

【遂愿赠书 - 1期】：安恒“网安三剑客”-大模型时代下的网络安全实战指南

文章目录 一、图书背景二、网安实战宝典2.1《内网渗透技术》2.2《渗透测试技术》2.3《Web应用安全》 三、校企合作&#xff0c;产学研结合四、大模型时代的数字安全五、 网络安全无小事 一、图书背景 大模型风潮已掀起&#xff0c;各大巨头争相入局&#xff0c;从ChatGPT到Sor…
阅读更多...
研学活动报名收集材料怎么写？教程来了！

研学活动报名收集材料怎么写？教程来了！

研学活动作为学校教育的重要组成部分&#xff0c;不仅能够拓宽学生的视野&#xff0c;还能促进家校沟通。学生们报名还是十分积极踊跃的&#xff0c;然而研学活动报名收集材料该怎么写却困扰着不少老师&#xff0c;其实只需要把姓名和联系方式等收集全就可以了&#xff0c;主要…
阅读更多...
Go Modules 使用

Go Modules 使用

文章参考https://blog.csdn.net/wohu1104/article/details/110505489 不使用Go Modules&#xff0c;所有的依赖包都是存放在 GOPATH /pkg下&#xff0c;没有版本控制。如果 package 没有做到完全的向前兼容&#xff0c;会导致多个项目无法运行(包版本需求不同)。 于是推出了g…
阅读更多...
遥感卫星影像处理流程

遥感卫星影像处理流程

当空中的遥感卫星获取了地球数字影像&#xff0c;并传回地面&#xff0c;是否工作就结束了&#xff1f;答案显然是否定的&#xff0c;相反&#xff0c;这正是遥感数字图像处理工作的开始。 遥感数字图像&#xff08;Digital image&#xff0c;后简称“遥感影像”&#xff09;是…
阅读更多...
FTP

FTP

文章目录 概述主动模式和被动模式的工作过程注意事项 概述 文件传输协议 FTP&#xff08;File Transfer Protocol&#xff09;在 TCP/IP 协议族中属于应用层协议&#xff0c;是文件传输标准。主要功能是向用户提供本地和远程主机之间的文件传输&#xff0c;尤其在进行版本升级…
阅读更多...
数据分析每周挑战——心衰患者特征数据集

数据分析每周挑战——心衰患者特征数据集

这是一篇关于医学数据的数据分析&#xff0c;但是这个数据集数据不是很多。 背景描述 本数据集包含了多个与心力衰竭相关的特征&#xff0c;用于分析和预测患者心力衰竭发作的风险。数据集涵盖了从40岁到95岁不等年龄的患者群体&#xff0c;提供了广泛的生理和生活方式指标&a…
阅读更多...
【Linux终端探险】：从入门到熟练，玩转基础命令的秘密（二）

【Linux终端探险】：从入门到熟练，玩转基础命令的秘密（二）

文章目录 &#x1f680;Linux基础命令&#xff08;二&#xff09;&#x1f308;1. 寻找目录/文件命令⭐2. 创建文件命令&#x1f44a;3. 网络接口查询命令❤️4. 打包命令&#x1f4a5;5. 解压命令 上期回顾&#xff1a; &#x1f525;&#x1f525;&#x1f525;【Linux终端探…
阅读更多...
CMakeFile.txt通过sysroot方式后生成makefile报错

CMakeFile.txt通过sysroot方式后生成makefile报错

报错信息如下&#xff1a; -- The C compiler identification is unknown -- The CXX compiler identification is unknown -- Check for working C compiler: /home/xj/asm/host/bin/aarch64-buildroot-linux-gnu-gcc -- Check for working C compiler: /home/xj/asm/host/bi…
阅读更多...
英伟达GeForce发布《星球大战：亡命之徒》宣传片，8月30日开售

英伟达GeForce发布《星球大战：亡命之徒》宣传片，8月30日开售

易采游戏网6月3日消息&#xff1a;英伟达GeForce近日发布了一款激动人心的宣传片&#xff0c;展示了备受期待的游戏大作《星球大战&#xff1a;亡命之徒》。该宣传片不仅展现了游戏的华丽画面和引人入胜的故事情节&#xff0c;还重点介绍了支持NVIDIA DLSS 3.5、光线追踪和Refl…
阅读更多...
工业级物联网边缘网关解决方案-天拓四方

工业级物联网边缘网关解决方案-天拓四方

随着工业4.0时代的到来&#xff0c;越来越多的企业开始寻求智能化升级&#xff0c;以提高生产效率、降低运营成本并增强市场竞争力。然而&#xff0c;在实际的转型升级过程中&#xff0c;许多企业面临着数据孤岛、设备兼容性差、网络安全风险高等问题&#xff0c;这些问题严重制…
阅读更多...
最新文章

Copyright @ 2022~2023