欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-select如何獲取下拉框選中l(wèi)abel和value的值

 更新時(shí)間:2022年10月20日 09:05:55   作者:Komorebi゛  
在開發(fā)業(yè)務(wù)場(chǎng)景中我們通常遇到一些奇怪的需求,例如el-select業(yè)務(wù)場(chǎng)景需要同時(shí)獲取我們選中的label跟 value,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value的值,需要的朋友可以參考下

【示例1】

<templete slot-scope="scope">
    <el-form-item :prop="'list'. + scope.$index + '.goodModularId'">
        <!-- change事件中,會(huì)獲取到當(dāng)前選中的值(因?yàn)槟J(rèn)會(huì)將event參數(shù)傳遞過去;
			如果想要傳遞多個(gè)值,change($event, "傳遞的其他值"),將“選中的當(dāng)前元素” 和 “傳遞的其他值” 一起傳遞過去 -->
        <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)
            // 判斷的時(shí)候可以直接寫obj而不需要以判斷對(duì)象是否為空的方式是因?yàn)椋喝绻也坏?,find方法返回的是undefined而不是空對(duì)象
            if(obj) {
                this.ruleForm.list[index].goodModular = obj.name
            } else {
                this.ruleForm.list[index].goodModular = ''
            } 
    	}
        // 清空選項(xiàng)事件
        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 = ''
}

總結(jié)

到此這篇關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value值的文章就介紹到這了,更多相關(guān)el-select獲取下拉框選值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論