vue页面中一个小列表中多选框的选中状态的两种设置方法

news2024/10/6 20:35:37

第一种方法:所有类型都是固定的、后台提供了选中状态的接口(页面进入时默认展示所有类型和类型的选中状态

 思路:

        1、列出所有类型同时与后台规定好每种类型的id与对应的名称

        2、在mounted中执行获取后台给定的选中状态(包含1个或多个的id数组)

        3、将得到的结构绑定到el-checkbox-group 的 v-mdel上,到此功能实现(此类适合截图这种)

<el-checkbox-group v-model="checkListState" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="item in defaultChecked" :key="item.id" :label="item.alarm_code">{
  {item.title}}</el-checkbox>
</el-checkbox-group>

data:{
    return {
        defaultChecked:[
        {
          title:'12',
        

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

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

相关文章

单元测试基础

一、什么是单元测试&#xff1a; 单元测试是指&#xff0c;对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&#xff0c;这里的最小可测试单元通常是指函数或者类&#xff1b;单元测试属于最严格的软件测试手段&#xff0c;是最接近代码底层实现…

剑指 Offer 14- II: 剪绳子 II

这道题不能使用动态规划来解决&#xff0c;因为会越界。用贪心算法找规律可以得到答案&#xff08;3越多越好&#xff0c;小于等于4取本身的值&#xff09; 这道题错的原因在于res在存储过程中会越界&#xff0c;最轻微的上溢是 INT_MAX 1 &#xff1a;结果是 INT_MIN。 最严重…

C++学习笔记-第10单元 模板初步

第10单元 模板初步 文章目录 第10单元 模板初步单元导读10.1 模板与泛型编程10.1.1 元编程与泛型编程10.1.2 初识模板 10.2 函数模板10.2.1 函数模板10.2.2 函数模版实例化 10.3 排序示例与泛型化10.3.1 例子&#xff1a;选择排序10.3.2 将一个函数泛型化 10.4 类模板10.4.1 类…

基于matlab使用深度学习从分割图生成图像(附源码)

一、前言 此示例演示如何使用 pix2pixHD 条件生成对抗网络 &#xff08;CGAN&#xff09; 从语义分割映射生成场景的合成图像。 Pix2pixHD [1] 由两个同时训练的网络组成&#xff0c;以最大限度地提高两者的性能。 生成器是一种编码器-解码器风格的神经网络&#xff0c;可从语…

设置云服务器和配置docker

一、设置云服务器 刚租完服务器&#xff0c;直接利用公网ip登录此时进入到的是root目录下 ssh root公网ip 但是root的权限太大&#xff0c;一般做项目不会在root路径下直接操作&#xff0c;会创建一个子用户&#xff0c;一台服务器可以创建多个子用户&#xff0c;就像一个大…

通用二进制方式安装Mysql

一、去官网下载MySQL glibc版本 示例环境为CentOS 7.9版本&#xff0c;要安装的Mysql版本为5.7 1.选择版本下载到自己本地 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 2.将下载的tar包上传到自己的CentOS虚拟主机上 传输完成后&#xff0c;查看确认一下 …

Tomcat相关

1. 运行项目 将java项目打包为war或者war所对应的文件夹&#xff0c;放置于tomcat的webapps目录下。其实tomcat运行时会解压war到项目中并运行class文件&#xff0c;延伸开来&#xff0c;为啥不能用jar包&#xff0c;因为jar可能可以表示项目但也能表示依赖&#xff0c;tomcat…

Linux 内核和驱动开发工程师的发展前景怎么样?

或许这样的标题&#xff0c;应该是由像Linus或Greg KH这样的大师级的高手才有资格写的吧。但是作为我来说&#xff0c;也许我更想把这个标题作为一个疑问句来使用&#xff0c;整理一下自己的认识&#xff0c;用来勉励自己&#xff0c;和大家一起努力实现这个目标。认识肤浅的地…

4.51ue4:savegame

1.创建savegame&#xff0c;蓝图搜索savegame创建 2.ue4是类似于计算机磁盘读取和内存响应的方式进行保存数据&#xff0c;又称序列化。 详解&#xff1a; 序列化时类似于&#xff1a;从内存保存数据到磁盘的过程&#xff0c;是将数据进行序列化存入磁盘。 读取数据就是反序…

社区说|浅谈 WorkManager 的设计与实现:系统概述

什么是 社区说 ? 反思 系列博客是一种看似 “内卷” &#xff0c;但却 效果显著 的学习方式&#xff0c;该系列起源和目录请参考 这里 。 困境 作为一名 Android 开发者&#xff0c;即使你没有用过&#xff0c;也一定对 WorkManager 耳熟能详。 自2018年发布以来&#xff0c…

设计模式第22讲——访问者模式(Visitor)

目录 一、什么是访问者模式 二、角色组成 三、优缺点 四、 应用场景 4.1 生活场景 4.2 Java场景 五、代码实现 5.0 UML类图 5.1 抽象访问者——Visitor 5.2 具体访问者——Tourist 5.3 抽象元素——Spot 5.4 具体元素——View、Relic 5.5 对象结构——SpotCollecti…

大厂面试打起12万分小心?3轮技术面过,你也可能挂在HR手上!

很多朋友在面试大厂时存在一个误区&#xff0c;认为面试你的那个是最初给你打电话的HR&#xff0c;其实不然&#xff0c;更大可能是业务部门相关的 HRBP导致你面试失败。 1、什么是HRBP? 为了解释清楚这个问题&#xff0c;先说 HRBP 是什么。HRBP全称为 Human Resource Busin…

java对象clone

Object提供了colne方法给我们定义的类&#xff0c;用来进行对象克隆&#xff0c;但是这个clone方法是protected的&#xff0c;所以需要在我们需要使用clone的类中重写Object的clone方法&#xff0c;并且需要实现Cloneable接口&#xff0c;Cloneable接口是一个标记接口&#xff…

「JVS低代码开发平台2.1.8版本」-首页功能介绍

JVS是面向软件开发团队可以快速实现应用的基础开发脚手架&#xff0c;主要定位于企业信息化通用底座&#xff0c;采用微服务分布式框架&#xff0c;提供丰富的基础功能&#xff0c;集成众多业务引擎&#xff0c;它灵活性强&#xff0c;界面化配置对开发者友好&#xff0c;底层容…

【Java】Netty中ByteBuf学习笔记

文章目录 1) ByteBuf创建与自动扩容2&#xff09;直接内存 vs 堆内存3&#xff09;池化 vs 非池化4&#xff09;组成5&#xff09;写入6&#xff09;扩容7&#xff09;读取8&#xff09;retain & release9&#xff09;slice10&#xff09;duplicate11&#xff09;copy12&am…

给LLM装上知识:从LangChain+LLM的本地知识库问答到LLM与知识图谱的结合

第一部分 基于LangChain ChatGLM-6B的本地知识库问答的应用实现 1.1 什么是LangChain&#xff1a;连接本地知识库与LLM的桥梁 作为一个 LLM 应用框架&#xff0c;LangChain 支持调用多种不同模型&#xff0c;提供相对统一、便捷的操作接口&#xff0c;让模型即插即用&#x…

java并发编程 6:java内存模型与volatile(重点)

目录 硬件内存模型Java 内存模型主内存工作内存内存交互的八个原子操作JMM作用 可见性退不出的循环volatile解决同步模式之 Balking 有序性指令重排解决指令重排 volatile 原理volatile如何保证可见性volatile如何保证有序性volatile 不能解决指令交错double-checked locking 问…

2023/7/5总结

JS BOM 是浏览器对象模型 window对象是一个全局对象&#xff0c;也是JavaScript的顶级对象 所以通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 定时器-延时函数 setTimeout(回调函数&#xff0c;等待的毫秒数) 延时函数只会执行一次 清除延时函…

Java基础---String的长度限制

目录 典型回答 常量池限制 运行期限制 典型回答 String有长度限制&#xff0c;编译期和运行期不一样编译期需要用 CONSTANT_Utf8_info 结构用于表示字符串常量的值&#xff0c;而这个结构是有长度限制&#xff0c;他的限制是65535运行期&#xff0c;String的length参数是Int…

Jenkins 配置用户角色和权限

1、配置条件&#xff1a; 1&#xff09;已安装Jenkins&#xff0c;当前案例使用版本&#xff1a;2.319.3 2&#xff09;已成功进入Jenkins&#xff0c;并新建用户&#xff1a;dev_java 2、安装插件【系统管理-插件管理-搜索-可选插件】&#xff1a;Role-based Authoriz…