Vue+Element UI一个下拉框传字典值和对应字典Label


<el-select @change="getDeptName" v-model="form.deptCode">
     <el-option v-for="item in deptList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
<script>
    export default {
        data(){
            deptList:[
                             {dictValue:1,dictLabel:'研发部门 '},
                             {dictValue:2,dictLabel:'销售部门 '}
                        ]
            form:{
                deptCode: null,
                deptName: null,
             }
        },
       methods:{
      //找字典值对应Label名称方法 可全局挂载到main.js项目开发中超实用       checkDict(list, key) {
        // list--字典列表 key --字典值         
var obj = list.find(item => {return item.dictValue == key}) if (!obj) { return key } else { return obj.dictLabel } }, getDeptName() { this.$set( this.form,"deptName",this.checkDict(this.deptList, this.form.deptCode)); }, } } </script>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM