elementUI - 折叠以及多选的组件

news2024/10/5 20:21:14

在这里插入图片描述

//子组件
<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.coloradmin.cn/o/1798934.html

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

相关文章

企业必备技能-打造全屏轮播图的终极指南

企业必备技能-打造全屏轮播图的终极指南

标题&#xff1a;“视觉盛宴&#xff1a;打造全屏轮播图的终极指南” 引言 在网页设计中&#xff0c;轮播图是一种常见的视觉元素&#xff0c;它能够吸引访客的注意力并展示重要内容。本文档将指导你如何使用HTML和CSS快速创建一个全屏轮播图&#xff0c;使您的网站更加生动和…
阅读更多...
react-学习基础偏

react-学习基础偏

1.新建文件夹 2.vscode引入这个文件夹 3.打开vscode终端 执行命令 npx create-react-app react-basic 创建基本项目&#xff08;react-basic项目文件夹名&#xff09; 4.进入到这个文件夹 可用的一些命令 这就算启动成功 5. 这是项目的核心包 渲染流程
阅读更多...
免费实现网站HTTPS访问

免费实现网站HTTPS访问

HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是一种基于SSL协议的HTTP安全协议&#xff0c;旨在为客户端&#xff08;浏览器&#xff09;与服务器之间的通信提供加密通道&#xff0c;确保数据在传输过程中的保密性、完整性和身份验证。与传统的HTTP相比&a…
阅读更多...
​​​​​​ 基于Nmap的异步无状态端口扫描技术

​​​​​​ 基于Nmap的异步无状态端口扫描技术

​​​​​​ 基于Nmap的异步无状态端口扫描技术 传统的端口扫描&#xff0c;主要是依靠TCP三次握手去连接&#xff0c;而建立连接的各个过程都存在连接状态&#xff0c;这些状态由操作系统在底层实现存储&#xff0c;可利用这些状态对应用层的数据进行处理。但是&#xff0c;…
阅读更多...
2024-06-07 Unity 编辑器开发之编辑器拓展8 —— Scene 窗口拓展

2024-06-07 Unity 编辑器开发之编辑器拓展8 —— Scene 窗口拓展

文章目录 1 Handles 类1.1 Scene 响应函数1.2 自定义窗口中监听 Scene1.3 Handles 常用 API2.2.1 颜色控制2.2.2 文本2.2.3 线段2.2.4 虚线2.2.5 圆弧2.2.6 圆2.2.7 立方体2.2.8 几何体2.2.9 移动、旋转、缩放2.2.10 自由移动 / 旋转 2 Scene 窗口中显示 GUI3 HandleUtility4 G…
阅读更多...
AI产品经理岗位需求量大吗？好找工作吗？

AI产品经理岗位需求量大吗？好找工作吗？

前言 在当今这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已不再仅仅是一个遥远的概念&#xff0c;而是深深嵌入到我们生活的方方面面&#xff0c;从日常的语音助手到复杂的自动驾驶系统&#xff0c;AI的触角无处不在。随着AI技术的广泛应用和持续进…
阅读更多...
一图说明LLM大模型最核心原理

一图说明LLM大模型最核心原理

阅读更多...
react native中内容占位效果

react native中内容占位效果

react native中内容占位效果 效果实例图实例代码skeleton.jsx 效果实例图 实例代码skeleton.jsx import React, { useEffect, useRef } from "react"; import { Animated, StyleSheet, View } from "react-native"; import { pxToPd } from "../../.…
阅读更多...
“开源与闭源：AI大模型发展的未来之路“

“开源与闭源：AI大模型发展的未来之路“

文章目录 每日一句正能量前言数据隐私开源大模型与数据隐私闭源大模型与数据隐私数据隐私保护的共同考虑结论 商业应用开源大模型的商业应用优势&#xff1a;开源大模型的商业应用劣势&#xff1a;闭源大模型的商业应用优势&#xff1a;闭源大模型的商业应用劣势&#xff1a;商…
阅读更多...
vue3+ts 拖拽容器边缘，改变容器宽度和高度

vue3+ts 拖拽容器边缘，改变容器宽度和高度

例如&#xff1a;我们的代码编辑器 终端与代码区&#xff0c;可以纵向拖拽&#xff0c;改变两个容器高度 目录与代码区可以横向拖拽&#xff0c;改变两个容器宽度 本文使用vue3tstailwindcss&#xff0c;把横向纵向整合在一起写了&#xff0c;也可以分开使用 utils目录下新建…
阅读更多...
【AIoT-Robot】3d hand pose

【AIoT-Robot】3d hand pose

手语是聋哑人士的主要沟通工具，它是利用手部和身体的动作来传达意义。虽然手语帮助它的使用者之间互相沟通，但聋哑人士与一般人的沟通却十分困难，这个沟通障碍是源于大部分人不懂得手语。 1. 手势&&手语 手势：手的姿势 ，通常称作手势。它指的是人在运用手臂时，所…
阅读更多...
基因分析平台开发1 - Layui WebUI组件库快速地构建网页界面

基因分析平台开发1 - Layui WebUI组件库快速地构建网页界面

介绍一个Web UI库&#xff0c;可快速实现基因分析平台前端部分的开发&#xff0c;借助帮助文档&#xff0c;快速实现自己想要效果。 1. Layui 简介 Layui 是一套免费的开源 Web UI 组件库&#xff0c;可用于更简单快速地构建网页界面&#xff0c;全部主流 Web 浏览器&#xf…
阅读更多...
【Java】解决Java报错：ClassCastException

【Java】解决Java报错：ClassCastException

文章目录 引言1. 错误详解2. 常见的出错场景2.1 错误的类型转换2.2 泛型集合中的类型转换2.3 自定义类和接口转换 3. 解决方案3.1 使用 instanceof 检查类型3.2 使用泛型3.3 避免不必要的类型转换 4. 预防措施4.1 使用泛型和注解4.2 编写防御性代码4.3 使用注解和检查工具 5. 示…
阅读更多...
这才是计科之 Onix XV6 源码分析（1、XV6-x86的启动）

这才是计科之 Onix XV6 源码分析（1、XV6-x86的启动）

这才是计科之 Onix & XV6 源码分析&#xff08;1、XV6-x86的启动&#xff09; 前言 Onix是一款相对于XV6来说功能更为健全的单核OS&#xff0c;由于功能更加完善&#xff0c;Onix也更加复杂。代码阅读起来会比较绕。 XV6是一款简单易读的多核操作系统&#xff0c;但其功…
阅读更多...
openh264 降噪功能源码分析

openh264 降噪功能源码分析

文件位置 ● openh264/codec/processing/denoise/denoise.cpp ● openh264/codec/processing/denoise/denoise_filter.cpp 代码流程 说明&#xff1a;从代码流程可以看到&#xff0c;实现降噪的核心功能主要就是BilateralDenoiseLuma、WaverageDenoiseChroma两个函数。 原理…
阅读更多...
[word] word大括号怎么打两行 #其他#其他#微信

[word] word大括号怎么打两行 #其他#其他#微信

word大括号怎么打两行 Word给用户提供了用于创建专业而优雅的文档工具&#xff0c;帮助用户节省时间&#xff0c;并得到优雅美观的结果。 一直以来&#xff0c;Microsoft Office Word 都是最流行的文字处理程序。 作为 Office 套件的核心程序&#xff0c; Word 提供了许多易…
阅读更多...
ChatGPT-4o提示词的九大酷炫用法，你知道几个？

ChatGPT-4o提示词的九大酷炫用法，你知道几个？

ChatGPT-4o提示词的九大酷炫用法&#xff0c;你知道几个&#xff1f;&#x1f680; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典…
阅读更多...
android antirollback verno 获取方法

android antirollback verno 获取方法

ReadRollbackIndex.exe 获取 调查avbVBMeta结构体 typedef struct AvbVBMetaImageHeader { /* 0: Four bytes equal to "AVB0" (AVB_MAGIC). */ uint8_t magic[AVB_MAGIC_LEN]; /* 4: The major version of libavb required for this header. */ uint32_t…
阅读更多...
rtl8723DU移植 android4.4 4418 （第二部分蓝牙部分）

rtl8723DU移植 android4.4 4418 （第二部分蓝牙部分）

使用的代码&#xff1a; HMI &#xff08;8723bu&#xff09;源码 567_RTL8723DU_WiFi_linux_v5.6.5.3_35502_COEX20181130-2e2e.20191025.zip 由于之前写的所有笔记没有保存&#xff0c;这里只能是部分。 0、 前置知识 1 、kernel 的移植 2、hardwire的移植 将 驱动中的 h…
阅读更多...
大功率回馈式负载：行业竞争态势

大功率回馈式负载：行业竞争态势

随着科技的不断发展&#xff0c;大功率回馈式负载在各个行业中的应用越来越广泛。大功率回馈式负载是一种能够将电能回馈到电网的设备&#xff0c;具有节能、环保、高效等优点。然而&#xff0c;随着市场竞争的加剧&#xff0c;大功率回馈式负载行业也面临着诸多挑战。 首先&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023