精华内容
下载资源
问答
  • 2022-05-07 14:19:25

    element-ui 给el-select下拉框的el-option选项绑定点击事件
    在el-select里可以写 @change 监视选中值的改变。
    我只想在选中某个选项时执行操作,使用@change会使每次选中都进入方法,需要用if语句来判断,能不能直接在该el-option里写入 @click 呢?

    在el-option里直接写@click发现没反应,
    改为使用 @click.native 即可以给el-option添加点击事件。
     

    更多相关内容
  • el-option点击事件

    在这里插入图片描述
    一般来说 el-option 都是走一个遍历的,尤其是当需要显示当前项的a值,提交当前项的b值,需要通过点击当前项来进行赋值,所以要用到@click.native

    展开全文
  • 需求:有两个select下拉框,选择其中一个select中的el-option值之后,更新另一个select的数据源数组 这里需要注意的是参数key,value对应 :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" ...

    需求:有两个select下拉框,选择其中一个select中的el-option值之后,更新另一个select的数据源数组

    这里需要注意的是参数key,value对应

    :key="dict.dictValue"
    :label="dict.dictLabel"
    :value="dict.dictValue"

    this.inspectTimeOption = [
        {dictValue: '1', dictLabel: '1'}
    ]

            <el-form-item label="巡检类型" prop="inspectType" >
              <el-select v-model="form.inspectType" @change="selectInspectType(form.inspectType)" clearable style="width:380px" placeholder="请选择">
                <el-option
                  v-for="dict in inspectTypesOption"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item label="巡检时间" prop="inspectTime">
              <el-select v-model="form.inspectTime" @change="selectInspectType(form.inspectType)" clearable style="width:380px" placeholder="请选择">
                <el-option
                  v-for="dict in inspectTimeOption"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
     
     
    <script>
        data () {
            // 巡检类型
          inspectTypesOption:[],
          // 巡检时间
          inspectTimeOption:[],
          form: {
                inspectType:''
            }
        },
        methods: {
            selectInspectType(inspectType){
                console.log("当前巡检类型 :" + inspectType);
                if (inspectType == '1'){
                    // 巡检时间
                    this.inspectTimeOption = [
                      {dictValue: '1', dictLabel: '1'},
                      {dictValue: '2', dictLabel: '2'},
                      {dictValue: '3', dictLabel: '3'},
                      {dictValue: '4', dictLabel: '4'},
                      {dictValue: '5', dictLabel: '5'}
                    ]
                }else {
                    // 巡检时间
                    this.inspectTimeOption = [
                      {dictValue: '6', dictLabel: '6'},
                      {dictValue: '7', dictLabel: '7'},
                      {dictValue: '8', dictLabel: '8'}
                    ]
                }
            }
        },
      }
    </script>
     

    展开全文
  • 在el-select标签下使用@change="selectChange" <template> <div class="tab"> <el-select v-model="value" ...el-option v-for="item in options" :key="item.value" :label="it

    在el-select标签下使用@change="selectChange"

    <template>
    	<div class="tab">
    		 <el-select v-model="value" placeholder="请选择" @change="selectChange">
    		    <el-option
    		      v-for="item in options"
    		      :key="item.value"
    		      :label="item.label"
    		      :value="item.value">
    		    </el-option>
    		  </el-select>
    	</div>
    </template>
    
    <script>
    	export default {
    	  name: 'Tab',
    	  data() {
    	        return {
    	          options: [{
    	            value: '选项1',
    	            label: '资料'
    	          }, {
    	            value: '选项2',
    	            label: '教程'
    	          }, {
    	            value: '选项3',
    	            label: '工具'
    	          }],
    	          value: '选项1'
    	        }
    	      },
    		methods:{
    			selectChange(aaa) {
    			        console.log(aaa)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    展开全文
  • element中@click绑定多个点击事件

    千次阅读 2021-07-28 11:39:55
    element中@click绑定多个点击事件 java_久孤是一名对技术持有独钟热爱的java资深程序员,崇尚程序界的开源精神,乐于做一个技术价值分享的博主,愿程序在你我这永远不迷茫 在element中给单个元素绑定不同的事件去...
  • element-ui select 点击事件无效

    千次阅读 2020-10-23 14:54:20
    用第三方组件或者UI框架会自带自身封装的事件,如keyup,click等,会覆盖原生的事件,从而无法起效果。...el-option v-for="item in options" :key="item.value" :label="item.label" :value="i
  • 1、怎样让有些字段能点击,有些字段点击不收缩,并且能够自定义呢? 解决办法:把自定义字段disabled 设置为true ,使其点击不收缩; 自定义 2、点击选择框里面的选择框,不收缩外面的选择框? 解决办法:设置select...
  • 直接绑定将option中的value值绑定给v-model <el v-for=item key=item.value value=item.value label=item.label></el> [removed] export default{ data() { return { options: [{ value: '01',
  • 一,元素中的数据 <el-select v-model="my_stars" placeholder="国家" ...el-option label="全球" value="全球"></el-option> <template v-for="(item, index) in languages"> <el-option
  • el-select中每个option加删除按钮并且可点击
  • 如下所示: 请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> 我们需要的是选择之后才触发,但是这样写你会发现,页面初始化的时候会触发多次,选择之后...
  • 后端检查了端口,我认为后端错误,结果是@click没有添加.native,真是无语,下面是修改方法 <el-form-item label="药品名称" :label-width="formLabelWidth"> <el-select v-model="form....el-option .
  • 解决element下拉菜单子选项click事件

    千次阅读 2020-04-03 15:06:36
    解决element下拉菜单子选项click事件 <el-select v-model="value" placeholder="中文" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ...
  • }, 这里介绍的,通过绑定关闭事件,可以进行数据清除 绑定@close='handleCancle进行处理 标题" :visible.sync="bind" size="small" @close='handleCancle'> </el-dialog> handleCancle () { this.$refs.form....
  • 直接上代码吧~ 用户类型 width=180> placeholder=请选择 change=changeRole($event,scope)> <el-option v-for=item in roles :key=item.value :l
  • 常规写法不起作用 @click=‘change’ <el-select v-model="value" filterable placeholder="请选择" @click='...el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.val...
  • // 创建Vue自定义事件 /** 自定义下拉框下拉到底事件 */ 'el-select-loadmore': { bind(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-dropdown__wrap' ); ...
  • 实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考 准备工作: 除了vue脚手架、element等必要包之外。该项目还用到了...
  • Elementui select 设置点击事件,在Change事件前触发 <el-select v-model="list.userJumpId" clearable placeholder="请选择二跳页名称/ID" style="width: 250px" :disabled="userJumpNameDisabled" @...
  • style="width: 100%" :remote-method="getCompanyName" @input="getCompanyLicenseKey($event)"> <el-option v-for="item in this.dataForm.licenseKeyOptions" :key="item" :label="item" :value="item"> </el-...
  • 去官方文档看了看,文档中提到的是根据Options数据内容变化实时更新Echarts,并没有触发点击事件时才刷新的方法;去百度搜了一下,也没有此类的文章,多是和官方文档一样,设置定时器动态刷新 Echarts 关于触发某...
  • 这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除。 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持。...
  • 1.安装vuecli脚手架2.终端输入cnpm i element-ui -S安装element-ui3.按需引入select组件在main.js中写入如下代码/* 导入第三方库开始 */...// 按需加载Select组件import {Select,Option,Dialog,Button} from 'el...
  • 笔者出现的这种情况是:同一个表单中有两个下拉框,...el-option lable="男" value="男"></el-option> <el-option lable="女" value="女"></el-option> <el-option lable="变性者" value="变
  • element-ui的下拉选择框组件时,绑定@change点击事件selectSystemChanged,可以打印,但是不显示数据 <el-form-item label="消费方系统" prop="consumeSystem"> <el-select @change=...
  • 将@click改为@click.native='logoutHandle';即可监听选项的点击事件。 退出
  • Element UI下拉列表el-option中的key、value、label含义 <el-select v-model="queryParams.level" placeholder="级别" style='margin-right:5px;width:140px' clearable> <el-option v-for="item in ...
  • element 清空el-option和清空el-cascader

    千次阅读 2020-05-18 18:41:08
    在vue管理后台页面,增删查改算是常见的需求了,为了偷懒,很多人都会只写一个弹窗,在这个弹窗里面完成新增和修改操作,所以,点击提交的时候清空下拉框数据,就成了必要 案例: // html <el-option v-for=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,257
精华内容 9,302
关键字:

element option加点击事件