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

2023-11-18

效果

   

一、使用步骤 

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • word文档中如何添加目录

    如果word文档的内容较多 结构复杂 那么在文档首页设置一个目录链接是非常有必要的 本文将介绍如何添加此目录 1 设置标题 在文档中选择将在目录中显示的内容 将之设置为 标题1 标题2 或 标题3 等 其中 标题1 代表一级标题 应为顶级目
  • 如何在 Java 中调用 MATLAB 代码

    文章目录 测评 完整源代码 运行环境 MATLAB R2022a Java 8 1 8 0 311 IntelliJ IDEA 2022 2 1 Ultimate Edition Maven 3 8 3 Windows 10 教育版 64位
  • ios 删除无用证书

    1 前往文件夹 Library MobileDevice Provisioning Profiles 然后可以删除里面的所有文件 然后就可以根据自己的需求重新下载了
  • STM32之_keil 编译内存大小解析

    Program Size Code 28784 RO data 6480 RW data 60 ZI data 3900 的含义 1 Code 程序所占用的FLASH大小 存储在FLASH 2 RO data Read only data
  • 简单的c++ UDP类 + 多线程 win32编程

    UdpClient h include Thread h class IUdpRecvCallback public virtual void OnRecv const char buf USHORT len const char from
  • 基恩士PLC KV8000+XH16EC总线控制,全ST程序实例

    基恩士PLC KV8000 XH16EC总线控制 全ST程序实例 本人自己开发全程序无加密 公司级框架 功能齐全 提供项目源码框架FB源码 触摸屏源码 需要一定ST基础才能看懂 重在分享编程思想 没用过该控制器的请慎拍 请使用11 10版本
  • 图像的二值化分割,otsu类间方差法

    二值化图像指图像中的每个像素只取两个离散的值之一 用数学公式表示为 公式中 f x y 表示一幅数字图像 X Y表示该图像中某像素的坐标值 T为 二值化的阈值 表示经过阈值运算后的二值化图像 这里0和1仅仅是一个抽象表示 并非实际像素值 它
  • python 实现百度关键字自动爬虫

    coding utf 8 In 3 import requests from lxml import etree import re from sqlalchemy import create engine engine create en
  • IDEA中快捷键大全

    Alt 回车 导入包 自动修正 Ctrl N 查找类 Ctrl Shift N 查找文件 Ctrl Alt L 格式化代码 Ctrl Alt O 优化导入的类和包 Alt Insert 生成代码 如get set方法 构造函数等 Ctrl
  • 【Linux】Linux下的自动化构建工具——make/makefile

    需要云服务器等云产品来学习Linux的同学可以移步 gt 腾讯云 lt gt 阿里云 lt gt 华为云 lt 官网 轻量型云服务器低至112元 年 新用户首次下单享超低折扣 目录 一 make和makefile的区别 二 makefile
  • 3. 形状和转换

    文章目录 形状和转换 改变形状 np expand dims np squeeze np reshape arr reshape 反序 转置 arr T np transpose 形状和转换 array 大多数情况下都是以多维的形式出现的
  • combotree 只能选中叶子节点

    combotree 只能选中叶子节点 一 Aphorism 人之所恶在好为人师 慎言之 二 summary 应该分为两种情况 1 第一种情况 单选 multiple false tt combotree nultiple false onB
  • edge浏览器打开出现ref A ref B refC

    打开edge浏览器 设置 或地址栏输入 edge settings privacy 进入 隐私 搜索和服务 选择 cleanbrowsing 重启浏览器 活清理浏览器缓存 第5步里 我是将所有历史都清除了 如果历史或cookie有重要的东西
  • IBM AppScan使用随想

    公司的一个客户让我对他的一个网站进行安全性测试 该网站刚刚完成一期开发 从他给我的别的网站的测试报告中 我发现了IBM AppScan 最后安装了8 0版并成功破解 What s IBM AppScan It s a famous test
  • 第二十章 Chisel基础——生成Verilog与基本测试

    经过前三章的内容 读者已经了解了如何使用Chisel构建一个基本的模块 本章的内容就是在此基础上 把一个Chisel模块编译成Verilog代码 并进一步使用Verilator做一些简单的测试 一 生成Verilog 前面介绍Scala的内
  • 云服务器 宝塔部署SpringBoot前后端分离项目

    博主介绍 小黄鸭技术 擅长领域 Java 实用工具 运维 系列专栏 开发工具 Java之路 八股文之路 如果文章写作时有错误的地方 请各位大佬指正 一起进步 欢迎大家点赞 收藏 评论 支持博主 目录 前言 环境 部署 查看面板地址和用户名以
  • Java设计模式-单例模式

    单例模式 在有些系统中 为了节省内存资源 保证数据内容的一致性 对某些类要求只能创建一个实例 这就是所谓的单例模式 单例模式的定义与特点 单例 Singleton 模式的定义 指一个类只有一个实例 且该类能自行创建这个实例的一种模式 例如
  • MySQL之事务与引擎

    目录 一 事物 1 事务的概念 2 事务的ACID特点 3 事务之间的相互影响 4 Mysql及事务隔离级别 四种 1 查询会话事务隔离级别 2 查询会话事务隔离级别 3 设置全局事务隔离级别 4 设置会话事务隔离级别 5 事务控制语句 6
  • ssm+mysql+小程序+ssm智慧社区管理系统 毕业设计源码101635

    基于SSM的智慧社区管理小程序 摘 要 随着互联网大趋势的到来 社会的方方面面 各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去 而其中最好的方式就是建立网络管理系统 并对其进行信息管理 由于现在网络的发达 社区管理通过网
  • Vue JeecgBoot 下拉选使用数据字典,设置默认值,默认选中第一个值 - 附完整示例

    效果 一 使用步骤 1 导入依赖文件 import initDictOptions filterDictText from components dict JDictSelectUtil 2 声明变量 data return dataVal