Vue JeecgBoot 下拉选使用数据字典,设置默认值,默认选中第一个值 - 附完整示例

效果

   

一、使用步骤 

1、导入依赖文件


import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil';

 2、声明变量

  data() {
    return {
      dataValue: '',
      datalist: []
    }
  },

 3、定义方法

    methods: {
    // dictCode="data,data_name,data_num"
    // 加载数据字典
    initDictConfig() {
        // 初始化字典
        initDictOptions('data,data_name,data_num').then((res) => {
          console.log(res);
            if (res.success) {
              this.datalist = res.result
              this.dataValue = res.result[0].value;
            }
        });
    },
  }

Vue JeecgBoot 下拉选使用数据字典,设置默认值,默认选中第一个值 - 附完整示例_第1张图片

4、调用方法

  created () {
    this.initDictConfig();
  },

5、HTML

    
            
              
                
                  {{ d.text }}
                
              
            

二、完整示例




                    
                    

你可能感兴趣的:(jeecg-boot,vue.js,前端,javascript)