el-select如何获取下拉框选中label和value的值

 更新时间:2022年10月20日 09:05:55   作者:Komorebi゛  
在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下

【示例1】

<templete slot-scope="scope">
    <el-form-item :prop="'list'. + scope.$index + '.goodModularId'">
        <!-- change事件中,会获取到当前选中的值(因为默认会将event参数传递过去;
			如果想要传递多个值,change($event, "传递的其他值"),将“选中的当前元素” 和 “传递的其他值” 一起传递过去 -->
        <el-select v-model="ruleForm.goodModularId" @change="getModularValue($event, scope.$index)" @clear="delModularValue(scope.$index)">
            <el-option v-for="(item,index) in modularData" :key="index" :value="item.id" :label="item.name"></el-option>
        </el-select>
    </el-form-item>
</templete>

<script>
    data() {
        return {
            ruleForm: {
                list: [{
                    goodModularId: '',
                	goodModular: ''
                }]
            }
        }
    }
    methods: {
        // 获取value值给goodModular
        getModularValue(val,index) {
            let obj = this.modularData.find(item => item.id === val)
            // 判断的时候可以直接写obj而不需要以判断对象是否为空的方式是因为:如果找不到,find方法返回的是undefined而不是空对象
            if(obj) {
                this.ruleForm.list[index].goodModular = obj.name
            } else {
                this.ruleForm.list[index].goodModular = ''
            } 
    	}
        // 清空选项事件
        delModularValue(index) {
            this.ruleForm.list[index].goodModular = ''
        }
    }
</script>

【示例2】

<templete slot-scope="scope">
    <el-form-item :prop="'list'. + scope.$index + '.goodModularId'">
        <el-select v-model="ruleForm.goodModularId" @clear="delModularValue(scope.$index)">
            <el-option v-for="(item,index) in modularData" :key="index" :value="item.id" :label="item.name" @click.native="getModularValue(item.id, scope.$index)"></el-option>
        </el-select>
    </el-form-item>
</templete>


<script>
    data() {
        return {
            ruleForm: {
                list: [{
                    goodModularId: '',
                	goodModular: ''
                }]
            }
        }
    }
    methods: {
        getModularValue(val,index) {
        	let obj = this.modularData.find(item => item.id === val)
            if(obj) {
                this.ruleForm.list[index].goodModular = obj.name
            } else {
                this.ruleForm.list[index].goodModular = ''
            }           
    	},
        delModularValue(index) {
            this.ruleForm.list[index].goodModular = ''
        }
    }
</script>

【示例3】

<el-form-item label="类别" prop="categoryId">
	<el-select v-model="ruleForm.categoryId" @clear="clearCategory">
	    <el-option v-for="(item,index) in categoryOptions" :key="item.id" :value="item.id" :label="item.name" @click.native="getValue(item.name, categoryName)"></el-option>
	</el-select>
</el-form-item>
getValue(val, type) {
	this.ruleForm[type] = val
}
clearCategory() {
	this.ruleForm.categoryName = ''
}

总结

到此这篇关于el-select如何获取下拉框选中label和value值的文章就介绍到这了,更多相关el-select获取下拉框选值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目打包部署跨域的实现步骤

    vue项目打包部署跨域的实现步骤

    在前端 Vue 项目打包后,如果需要访问另一个域名下的接口,由于浏览器的同源策略限制,会出现跨域问题,本文就介绍一下vue项目打包部署跨域的实现步骤,感兴趣的可以了解一下
    2023-05-05
  • vue项目中更改名字和图标的简单实现步骤

    vue项目中更改名字和图标的简单实现步骤

    今天在写vue项目时碰到的问题是怎么修改vue的网页图标,所以下面这篇文章主要给大家介绍了关于vue项目中更改名字和图标的简单实现,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    本篇文章主要介绍了基于vue监听滚动事件实现锚点链接平滑滚动的方法,非常具有实用价值,有兴趣的可以了解一下
    2018-01-01
  • 利用webstrom调试Vue.js单页面程序的方法教程

    利用webstrom调试Vue.js单页面程序的方法教程

    这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • vue截图转base64转文件File异步获取方式

    vue截图转base64转文件File异步获取方式

    这篇文章主要介绍了vue截图转base64转文件File异步获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3中reactive变量重新赋值无法响应的3种处理方法

    Vue3中reactive变量重新赋值无法响应的3种处理方法

    这篇文章主要给大家介绍了关于Vue3中reactive变量重新赋值无法响应的3种处理方法,在Vue3中可以使用reactive函数将一个普通对象转换为响应式对象,需要的朋友可以参考下
    2023-08-08
  • vue项目从node8.x升级到12.x后的问题解决

    vue项目从node8.x升级到12.x后的问题解决

    这篇文章主要介绍了vue项目从node8.x升级到12.x后的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue开发中如何在js文件里使用pinia和组件同步

    vue开发中如何在js文件里使用pinia和组件同步

    在JavaScript文件中封装涉及到使用Pinia的方法时,发现Pinia和组件内容并不同步,二者的状态是独立的,解决办法是,在新建对象的时候,将Pinia作为参数传入,本文给大家介绍vue开发中如何在js文件里使用pinia和组件同步,感兴趣的朋友一起看看吧
    2024-10-10
  • vue使用微信扫一扫功能的实现代码

    vue使用微信扫一扫功能的实现代码

    这篇文章主要介绍了vue使用微信扫一扫功能的实现代码,需要的朋友可以参考下
    2020-04-04
  • vue组件 非单文件组件的使用步骤

    vue组件 非单文件组件的使用步骤

    组件又分为非单文件组件和单文件组件,一般常用的就是单文件组件,这篇文章主要介绍了vue组件非单文件组件的使用步骤,需要的朋友可以参考下
    2023-01-01

最新评论