<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. Linux 后台启动 Redis

    1. 修改 redis.conf 首先,这里有一个坑 ! 不同的 redis版本,在安装的时候,redis.conf 的路径稍微有些不同 redis.conf 可能出现的三个位置: /etc/redi ...

  2. 题解 CF585F 【Digits of Number Pi】

    考虑用数位 \(DP\) 来统计数字串个数,用 \(SAM\) 来实现子串的匹配. 设状态 \(f(pos,cur,lenth,lim,flag)\),表示数位的位数,在 \(SAM\) 上的节点,匹 ...

  3. laravel 迁移文件中修改含有enum字段的表报错解决方法

    解决方法: 在迁移文件中up方法最上方加上下面这一行代码即可: Schema::getConnection()->getDoctrineSchemaManager()->getDataba ...

  4. socket通信的三种实现方式

    三种 socket 的实现方式 nodejs 下的 socket 服务端代码 const net = require('net') const server = net.createServer() ...

  5. springboot 基于JS-SDK实现微信分享(一)

    本文主要介绍了SpringBoot 基于JS-SDK实现自定义微信分享,并通过本地测试的方式进行调试,文中通过微信实现分享流程及示例代码进行非常详细的介绍,希望本文对开发爱好者学习或者工作具有一定的参 ...

  6. Web压测工具之Webbench和http_load

    Webbench简介 是知名的网站压力测试工具,能测试处在相同硬件上,不同服务的性能以及不同硬件上同一个服务的运行状况. webbench的标准测试可以向我们展示服务器的两项内容:每秒钟相应请求数和每 ...

  7. 无线网络安全攻防实战进阶(杨哲) PDF|网盘下载内附提取码|

    面对当前国内企事业单位及soho无线网络的飞速发展.智能手机等便携式设备的广泛使用.无线网络犯罪案例日益递增的发展现状,<无线网络安全攻防实战进阶>作为<无线网络安全攻防实战> ...

  8. SpringBoot动态注入Bean

    目的: 在程序运行期间,动态添加Bean进入到Spring容器. 目前使用到的场景: 对当当网的ElasticJob进行封装,通过自定义注解@ElasticJob的方式开启分布式定时任务. 当所有的B ...

  9. PHP date_sun_info() 函数

    ------------恢复内容开始------------ 实例 返回有关 2013 年 1 月 1 日,纬度 31.7667,经度 35.2333 的日出/日落和黄昏开始/黄昏结束的信息: < ...

  10. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...