element ui的下拉选择单选和多选

单选:

html代码:

<el-form-item label="指令分类: "><el-select v-model="cid" style="width:100%;" placeholder="请选择指令分类" clearable><el-option v-for="item in orderCidList" :key="item.id" :label="item.title":value="item.id"></el-option></el-select>
</el-form-item>

js变量代码:

// 指令分类id
cid: "",
// 指令分类列表
orderCidList: []

js方法代码:

/*** 获取指令分类列表*/
async getOrderCidList() {let params = {type: 32}let res = await getCategoryList(params)if (res.code == 200) {this.orderCidList = res.data;    }
}

效果:

多选:

html代码:

<el-form-item label="指令分类: "><el-cascader style="width:100%;" v-model="searchInfo.cid" :options="orderCidList" :props="{ multiple: true, emitPath: false}" clearable placeholder="请选择指令分类"></el-cascader>
</el-form-item>

js变量代码:

// 指令分类id
cid: [],
// 指令分类列表
orderCidList: []

js方法代码:

/*** 获取指令分类列表*/
async getOrderCidList() {let params = {type: 32}let res = await getCategoryList(params)if (res.code == 200) {this.orderCidList = this.handleCategory(res.data);    }
},
/*** 处理多选分类*/
handleCategory(data) {let res = [];if (data.length > 0) {data.map((item) => {let obj = {value: item.id,label: item.title,};if (item.children && item.children.length > 0 ) {obj.children = this.handleCategory(item.children)};res.push(obj);});};return res;
}

效果:

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

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

相关文章

基于深度学习的海洋鱼类识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ............................................................ % 对测试集进行分类预测 [Pr…

谷歌AI搜索惊现恶意网站推荐!用户安全再遭威胁?

近日&#xff0c;谷歌推出的新搜索生成体验(SGE)功能引发广泛关注。然而&#xff0c;这一旨在提升搜索体验的AI功能却陷入了争议&#xff0c;有报道称其可能在生成的响应中推广欺诈网站和恶意软件&#xff0c;为用户带来安全风险。 AI-321 | 专注于AI工具分享的网站 AI工具集 …

云电脑火爆出圈,如何选择和使用?--腾讯云、ToDesk云电脑、青椒云使用评测和攻略

前言&#xff1a; Hello大家好&#xff0c;我是Dream。在当下&#xff0c;科技的飞速发展已经深入影响着我们的日常生活&#xff0c;特别是随着物联网的兴起和5G网络的普及&#xff0c;云计算作为一个重要的技术概念也逐渐走进了我们的视野。云计算早已不再是一个陌生的名词&am…

ReactNative项目构建分析与思考之RN组件化

传统RN项目对比 ReactNative项目构建分析与思考之react-native-gradle-plugin ReactNative项目构建分析与思考之native_modules.gradle ReactNative项目构建分析与思考之 cli-config 在之前的文章中&#xff0c;已经对RN的默认项目有了一个详细的分析&#xff0c;下面我们来…

ElasticSearch启动报错:Exception in thread “main“ SettingsException

Exception in thread "main" SettingsException[Failed to load settings from [elasticsearch.yml]]; nested: ParsingException[Failed to parse object: expecting token of type [START_OBJECT] but found [VALUE_STRING]]; 这个报错说明elasticsearch.yml这个配…

企业如何进行数字化转型?

企业进行数字化转型是一个系统性工程&#xff0c;涉及战略规划、技术应用、组织变革和人才培养等多个方面。以下是实现企业数字化转型的一些关键步骤和要素&#xff1a; 1.战略规划与目标设定&#xff1a; 明确数字化转型的目标和愿景&#xff0c;确保与企业整体战略相一致。 …

Linux:rpm部署Jenkins(1)

1.获取Jenkins安装包 我这里使用的是centos7系统&#xff0c;ip为&#xff1a;192.168.6.6 2G运存 连接外网 Jenkins需要java环境&#xff0c;java的jdk包你可以去网上下载离线包&#xff0c;或者直接去yum安装&#xff0c;我这里使用的是yum安装 再去获取Jenkins的rpm包…

每日一题——LeetCode1720.解码异或后的数组

方法一 异或运算的性质 encoded[i−1]arr[i−1]⊕arr[i] 在等式两边同时异或arr[i−1] 由于&#xff1a; 一个数异或它自己&#xff0c;结果总是0。 0异或任何数&#xff0c;结果都是那个数本身。 所以等式可以转化为&#xff1a; arr[i]arr[i−1]⊕encoded[i−1] 由于 a…

量子时代隐患显露!苹果CPU漏洞被爆,Mac用户敏感数据易遭窃取

研究表明&#xff0c;一项使Apple M系列处理器速度更快的功能也使它们容易受到无法修补的新侧信道攻击。理论上&#xff0c;黑客可以提取秘密加密密钥&#xff0c;然后访问敏感数据。 这个新发现的概念验证攻击被称为“GoFetch”。 GoFetch基于一种称为数据内存依赖预取器&…

qrcode插件-生成二维码

安装 yarn add qrcodejs2 --save npm install qrcodejs2 --save 使用 <template><div><div id"qrcodeImg"></div><!-- 创建一个div&#xff0c;并设置id --></div> </template> <script> import QRCode from q…

利用Python和IP技术实现智能旅游情报系统

文章目录 引言一、系统架构设计1. 数据采集模块2. 数据处理模块3. 用户界面模块 二、数据获取技术应用三、系统功能展示四、亮数据采集工具介绍五、总结六、号外 引言 随着旅游行业的不断发展&#xff0c;人们对旅游信息的需求也越来越大。为了帮助旅行者更好地规划行程&#…

Nodejs沙盒逃逸

Buffer 在较早一点的node.js版本中 (8.0 之前)&#xff0c;当 Buffer 的构造函数传入数字时, 会得到与数字长度一致的一个 Buffer&#xff0c;并且这个 Buffer 是未清零的。8.0 之后的版本可以通过另一个函数 Buffer.allocUnsafe(size) 来获得未清空的内存。 注&#xff1a;关…

P1219八皇后 (典DFS)

注意&#xff1a; 数组大小要开够&#xff0c;数据范围是6到13&#xff0c;要开到20&#xff0c;不然开到15数据点没法全部过。 代码&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<queue>using namespace std;i…

Rocket mq

搭建服务【有2个】 一个是NameServer还有一个是Broker&#xff0c;要两个服务协同 后台启动服务 允许服务端自己创建topic&#xff0c;如果客户端传来的topic没有的话 然后搞个rocket mq的仪表盘&#xff0c;application.yml改成自己的地址【只需要指定NameServer的地址&#…

更灵活的定位内存地址的方法

文章目录 更灵活的定位内存地址的方法and和or指令关于ASCII码以字符形式给出的数据大小写转换的问题[bxidata]用[bxidata]的方式进行数组的处理SI和DI[bxsi]和[bxdi][bxsiidata]和[bxdiidata]不同的寻址方式的灵活应用题目示例 更灵活的定位内存地址的方法 and和or指令 1&…

Axure RP 8中文---快速原型设计工具,一站式解决方案

Axure RP 8是一款专业的快速原型设计工具&#xff0c;以其直观易用的界面和丰富的功能受到广大用户的青睐。它支持用户通过拖放操作快速创建交互式原型&#xff0c;包括线框图、流程图等&#xff0c;并具备高保真度的设计能力。Axure RP 8还提供了团队协作和共享功能&#xff0…

【Java程序设计】【C00368】基于(JavaWeb)Springboot的箱包存储系统(有论文)

TOC 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;博客中有上百套程序可供参考&#xff0c;欢迎共同交流学习。 项目简介 项目获取 &#x1f345;文末点击卡片…

基于nodejs+vue铁路订票管理系统python-flask-django-php

该铁路订票管理系统采用前后端分离进行设计&#xff0c;并采用nodejs语言以及express框架进行开发。本系统主要设计并完成了用户登录管理过程、个人信息修改、用户管理、火车类型管理、火车信息管理、车票预订管理、车票退票管理、系统管理等功能。该系统操作简单&#xff0c;界…

13_Linux内核配置选项

内核配置选项 内核配置通常是对内核支持的各个功能进行取舍配置&#xff0c;将配置的方案保存到 configure文件中。在编译内核的时候&#xff0c;就会根据此配置对内核进行取舍编译。 编译内核之前要先配置。为了正确、合理地设置内核编译配置选项&#xff0c;从而只编译系统需…

BM85 验证IP地址(字符串)

import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 验证IP地址* param IP string字符串 一个IP地址字符串* return string字符串*/public boolean isIPv4(String IP){//没有.i…