vue+element开发使用el-select不能回显的处理方案

目录
  • 使用el-select不能回显的处理
  • el-select编辑数据不回显问题

使用el-select不能回显的处理

下拉框选择的时候，选不上下拉框的值，element提供了@change事件使用vm.$forceUpdate() 方法进行强制刷新，就可以把值渲染上去。

$forceUpdate()
                  <el-select v-model="price" clearable placeholder="请选择"
                    @change="$forceUpdate()">
                    <el-option
                      v-for="(item, index) in menuList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>

这样就可以解决。

el-select编辑数据不回显问题

编辑数据的时候需要回显下拉数据，我们只需要获得其值，vue会自动帮我们循环查询然后回显。先看看问题。

原下拉数据（orderTypeId 为我们需要的值 是字符串类型）

编辑 后台给我们返回的数据（serveId为数字类型）

后台修改完类型后

总结：el-select下拉数据回显 查询和编辑的数据类型要统一就可以

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • 详解关于element级联选择器数据回显问题

    element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • vue+element开发一个谷歌插件的全过程

    vue+element开发一个谷歌插件的全过程

    简单功能:点击浏览器右上角插件icon弹出小弹窗,点击设置弹出设置页,并替换背景图或颜色. 开始 1.本地创建文件夹testPlugin并新建manifest.json文件 { "name": "testPlugin", "description": "这是一个测试用例", "version": "0.0.1", "manifest_version": 2 } 2.添

  • 解决element ui cascader 动态加载回显问题

    elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&

  • 解决vue中el-date-picker type=daterange日期不回显的问题

    解决vue中el-date-picker type=daterange日期不回显的问题

    目录 vue中el-date-picker type=daterange日期不回显 原始代码 问题发现及处理 el-date-picker 日期组件事件回显不生效 日期组件回显处理 本文说明 vue中el-date-picker type=daterange日期不回显 原始代码 <el-form-item class="form_bigt_p" label="项目起止时间:" prop="time">   <el-date-pi

  • vue+element开发使用el-select不能回显的处理方案

    vue+element开发使用el-select不能回显的处理方案

    目录 使用el-select不能回显的处理 el-select编辑数据不回显问题 使用el-select不能回显的处理 下拉框选择的时候,选不上下拉框的值,element提供了@change事件使用vm.$forceUpdate() 方法进行强制刷新,就可以把值渲染上去. $forceUpdate() <el-select v-model="price" clearable placeholder="请选择" @change="$forceUpdat

  • VUE+element开发后台管理的搜索功能

    VUE+element开发后台管理的搜索功能

    本文实例为大家分享了VUE element后台管理搜索功能的具体代码,供大家参考,具体内容如下 先看看样式图: 实现上面这种简单搜索简单的三步走: 1.页面样式:在页面中使用form表单的校验功能来实现输入搜索.给表单的数据放入搜索请求的data数组中,也就是searchParams这个大集合中. 备注:如果给每个输入框添加了搜索按钮的click方法,则会在输入完成后直接执行列表搜索.所以考虑自己使用的具体位置. <div class="search">     <e

  • vue修改数据的时候,表单值回显不正确问题及解决

    目录 修改数据的时候,表单值回显不正确 vue简单实现数据回显 1.回显输入框html 2.data 定义的数据 3.计算属性判断按钮状态 4.对*数据做处理 修改数据的时候,表单值回显不正确 如果在修改数据的时候,发现表单的值回显不正确,每次修改,都是第一次修改的值,这个可能是你的代码有问题. 如果出现上面的问题,请检查 (1) prop的数据是否绑定正确 <el-col :span="24">   <el-form-item label="图标"

  • 使用webstorm配置vue+element开发环境

    目录 1. 设置启动环境 2. 处理element-ui标签提示unknown的问题 3. 处理webstorm不识别@路径别名的问题 4. 处理webstorm使用scss变量 1. 设置启动环境 新建npm,Name可以自定义一个名字,script选择启动项目的指令 2. 处理element-ui标签提示unknown的问题 File --> settings --> Languages & Frameworks --> JavaScript --> Libraries

  • Vue Element前端应用开发之用户管理模块的处理

    Vue Element前端应用开发之用户管理模块的处理

    1.权限管理模块的设计 我们知道,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理

  • Vue Element前端应用开发之树列表组件

    Vue Element前端应用开发之树列表组件

    1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加直观. 在Element里面也有一个el-tree的控件,如下所示,这里主要对它的各种属性和方法进行介绍. 简单的代码如下所示 <el-tree :data="data" @node-click="handleNodeClick"></el-tree> 主要在script部分里面指定它的d

  • Vue Element前端应用开发之获取后端数据

    Vue Element前端应用开发之获取后端数据

    概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

随机推荐