element-ui select多选绑定回显值问题

目录
  • element-ui select多选绑定回显值
  • element-ui下拉多选数据回显时无法进行修改
    • 解决方案
  • 总结

element-ui select多选绑定回显值

这是要最后实现的效果。

 <el-form-item label="机组名称" prop="unitName">
	<el-select
	     v-model="unitName"
	     multiple
	     placeholder="请选择"
	    @change="unitChange"
	>
	   <el-option
	       v-for="item in jzmcOption"
	       :key="item.unitId"
	       :label="item.unitName"
	       :value="item.unitId"
	    ></el-option>
	</el-select>
</el-form-item>

unitName 绑定的值是一个数组,jzmcOption是根据接口查出来的下拉框的数据。

后台要接收的是一个逗号分隔开的字符串，要接收id值和name值

unitName:[],
jzmcOption:[],

  unitChange(val) {
      console.log(val);
      let str = val.join(',');
      let name = '';
      this.jzmcOption.map((v, i) => {
        val.map((a, b) => {
          if (a == v.unitId) {
            name += ',' + v.unitName;
          }
        });
      });
      name = name.substring(1);
      this.jydyForm.unitName = name;
      this.jydyForm.unitId = str;
    },

这个是下拉框数据变化时获取到的数据。

在jzmcOption里找到他的name值拼起来用逗号隔开。

回显部分，逻辑是已经选中过的值，后台不会再返回了，所以我们需要将现在已经选中的数据跟后台查出来的数据拼起来，组成编辑时可选的新的下拉框。

    // 查看 编辑
    handleCheckLxr(row, status) {
      //将id值赋值给下拉框绑定的值
      this.unitName = this.jydyForm.unitId.split(',');      

      let i = this.jydyForm.unitId.split(',');
      let n = this.jydyForm.unitName.split(',');
      let list = [];
      i.map((v, i) => {
        list.push({ unitId: v, unitName: n[i] });
      });

      this.jzmcOption = [];
      getChooseByCustomerId(this.currentCustomerId).then(res => {

        if (res.rel) {
          let list_o = res.data.rows;
          this.jzmcOption = [...list_o,...list];
        }
      });
    },

回显时可能会遇到已经选中的值，没有在下拉数据中选择，可能是数据类型的问题，需要处理下。

element-ui下拉多选数据回显时无法进行修改

解决方案

在el-select添加@change事件，执行强制刷新this.$forceUpdate()。

示例：

<el-select @change="selectChangeHandle" ...>...</el-select>
selectChangeHandle(){
    this.$forceUpdate()
}

总结

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

赞 (0)

相关推荐

  • 解决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

  • vue中的select绑定多个值

    目录 vue select绑定多个值 vue el-select 绑定id值 vue select绑定多个值 不再通过v-model和value进行绑定 而是通过绑定索引值Index 然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值 <el-select v-model="basic_info.itemindex" placeholder=""  @input="change">     <el-

  • vue中v-model对select的绑定操作

    1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }

  • Element Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • element-ui select多选绑定回显值问题

    目录 element-ui select多选绑定回显值 element-ui下拉多选数据回显时无法进行修改 解决方案 总结 element-ui select多选绑定回显值 这是要最后实现的效果. <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @chang

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

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

  • element table跨分页多选及回显的实现示例

    1.data中定义getRowKeys,记录每行的key值 getRowKeys(row) {    return row.id; }, 2.el-table绑定getRowKeys <el-table     :data="tableData"     @selection-change="handleSelectionChange"     :row-key="getRowKeys" > 3.将selection列的reserve

  • element ui分页多选,翻页记忆的实例

    先说需求:实时记录当前选中的分页中的列表,分页保存数据,然后在用选中的数据进行某些操作:PS:左下角的数字为记录的当前选中的列表的和 直接上可用的代码,前提已配置好各种环境 HTML部分 <!--table组件需要使用ref="table"--> <template> <div> <el-table :data="tableData" ref="table" stripe style="widt

  • layui表格数据复选框回显设置方法

    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢? 每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除: table.render({ elem: '#LAY_table_topic', url: '/admin/to

  • java中下拉框select和单选按钮的回显操作

    前提: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 1.下拉框select <select name="departmentId" id="departmentId"> <option value="0">请选择部门</option> <c:forEach items=&

  • 关于elementUI select控件绑定多个值(对象)

    目录 elementUI select控件绑定多个值 el-select绑定多个值id.value 总结 elementUI select控件绑定多个值 通常使用的时候v-model都是绑定一个值,这样没有问题,但在某些需求中会获取选择项的多个值. 那么v-model就需要绑定一个对象,e饿了么的官网说明了绑定对象的时候必须绑定value-key值,否则会出现选择项无法改变的情况. value-key可以使用选择项中的值. 当时没有看文档的时候,自己也想了一个办法,就是绑定选择项的索引值,然后到

  • Element-UI中<el-cascader />回显失败问题的完美解决

    目录 项目场景: 问题描述 原因分析: 解决方案: 一.多选赋值回显 二.单选赋值回显 总结 项目场景: 项目场景:接手了一些老项目,需要做一些日志相关的操作,从后台日志跳转到相应页面要带上原来的请求参数,涉及到一个回显问题 问题描述 Element-UI的 <el-cascader /> 这个组件,赋值之后它不会回显!而且后端返回的值只有最后一级的id,可是一个劲看文档.找资料浪费大半天,所以总结了一个比较完美的办法 原因分析: value 属性才是回显的关键,只有绑定了value属性才会让

  • Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题

    今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回

随机推荐