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

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

2024-02-13 10:02:09 前端知识 前端哥 620 77 我要收藏

效果

   

一、使用步骤 

1、导入依赖文件

 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;
            }
        });
    },
  }

4、调用方法

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

5、HTML

    
            <a-form layout="inline" style="width:100%;">
              <a-form-item label="label">
                <a-select
                  v-model="dataValue"
                >
                  <a-select-option v-for="d in datalist" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>

二、完整示例

<template>
  <a-form layout="inline" style="width:100%;">
    <a-form-item label="label">
      <a-select v-model="dataValue">
        <a-select-option v-for="d in datalist" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
       </a-select>
     </a-form-item>
   </a-form>
</template>

<script>
  import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil';
  data() {
    return {
      dataValue: '',
      datalist: []
    }
  },

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

  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;
            }
        });
    },
  }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1939.html
标签
评论
发布的文章

jQuery 下载与安装教程

2024-02-28 11:02:44

若依中jquey相关问题

2024-02-28 11:02:41

【JavaWeb】1.JQuery

2024-02-28 11:02:21

jQuery日历签到插件下载

2024-02-28 11:02:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!