<el-select v-model="ruleForm.status" placeholder="请选择状态" @change="styleChange">
   <el-option v-for="item in optionA4" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>

JS:

     optionA4: [
{
value: '0',
label: '全部状态'
},
{
value: '1',
label: '正常运行'
},
{
value: '2',
label: '离线或故障'
},
{
value: '3',
label: '超标报警'
}
],

改变方法:

styleChange(val) {
if(val == 0){
this.isShow1 = true,
this.isShow2 = false
}else{
this.isShow1 = false
this.isShow2 = true
}
var data= {}
this.outfallType = val
data.outfallType = this.outfallType
getRealDataV2(data).then(val => {
if (val.code === 200) {
this.newData(val)
}
})
},

ElementUi——el-select下拉框的更多相关文章

  1. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  2. vue 运用ElementUI,做select下拉框回显

    第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. ...

  3. element-ui中select下拉框,选择后赋值成功,但是框上不显示的坑

    这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...

  4. element-ui select 下拉框位置错乱--解决

    element-ui select 下拉框位置错乱 由于使用 element-ui 的 select 组件时,下拉框的位置错乱了. 开始查找问题 通过各种问题查找,发现是 css 问题 css bod ...

  5. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  6. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  7. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  8. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  9. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  10. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Python Ethical Hacking - TROJANS Analysis(4)

    Adding Icons to Generated Executables Prepare a proper icon file. https://www.iconfinder.com/ Conver ...

  2. 深入理解JVM(二)垃圾收集器

    GC三问: 哪些内存需要回收? 什么时候回收? 如何回收? 程序计数器.虚拟机栈.本地方法栈随线程而生,随线程而灭,栈帧的内存分配在类结构确定下来就已知,在方法结束或者线程结束时就会回收.所以垃圾回收 ...

  3. Django安装与简单配置(1)

    目录 1. 环境准备 2. 开始安装 2.1 安装Django 2.2 安装 Mysql数据库 3. 开始配置 3.1 Django简单配置 3.1.1 创建一个工程(project)为devops: ...

  4. 任务调度中心xxl-job对外接口使用

    xxl-job主要分为调度中心和执行器提供了图像化界面,操作简单上手快,基本实现定时任务自动执行,同时可以针对任务日志进行查看.具体xxl-job可以再github上下载:https://github ...

  5. APP自动化 -- contexts(上下文切换)

    一.上下文是什么? 1.解释 1)在混合型APP中包含了  原生页面 和 H5页面,如果需要进入APP内嵌的H5页面里面去操作就需要先切换进去,如果要继续回到原生页面操作就需要切回来. 2)这个就像是 ...

  6. 2n皇后问题-------递归 暴力求解题与分布讨论题

    问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都不在同一行.同一列或同一条对角线上,任意的两个白皇后都不在同一行.同一列或同一 ...

  7. 初步知道scss 简化css复杂层级

    简介:今天在调试前端样式的时候,el-button组件位置需要调整并且 需要改字体大小 .直接上了一个 font-text:20px; 发现没作用,谷歌调试发现并未作用到组件里的<span> ...

  8. 篮球30S定时器设计

    一.设计介绍 本设计采用74LS192作为计数器,74LS192具有同步加减计数功能,可以通过引脚电平对它设置达到清零重置的目的,可以达到对计数器清零的功能,使用两片级联74LS192分别显示十位和个 ...

  9. C语言学习笔记一---C语言概述

    一.编程语言与解释语言 1.程序的执行 a.解释:借助一个能试图理解程序的程序,使计算机按要求执行你自己写的程序 b.编译:将所写程序翻译为机器语言写的程序,使计算机按要求执行你自己写的程序 2.两者 ...

  10. 网络通信机制:Socket、TCP/IP、HTTP

    13.1.1 TCP/IP协议 讲的很抽象,没具体看懂什么是TCP协议,什么是IP协议.IP协议保证消息从一个主机传送到另一个主机,消息在传送的过程中被分割成一个个小包,TCP协议会让两台相互连接的计 ...