首页 > 其他分享 >element ui 的el-select的回显,v-model绑定的是一个数组,如何保证回显成功

element ui 的el-select的回显,v-model绑定的是一个数组,如何保证回显成功

时间:2023-07-25 16:48:34浏览次数:36  
标签:选项 el option 回显 value element select

要确保 `el-select` 组件的回显成功,其中 `v-model` 绑定的是一个数组,你需要按照以下步骤进行操作:

1. 在 `el-option` 组件上使用 `:value` 属性设置每个选项的值,确保每个选项都有唯一的标识。

2. 在 `el-select` 组件上使用 `:multiple="true"` 属性来启用多选模式。

3. 在 `mounted` 钩子函数中,使用 `$nextTick` 方法在下一次 DOM 更新周期中设置选中的选项。这样可以确保 `el-select` 组件完全渲染后再进行选项的回显。

以下是一个示例:

```vue
<template>
<div>
<el-select v-model="selectedOptions" :multiple="true">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</div>
</template>

<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
],
selectedOptions: []
};
},
mounted() {
this.$nextTick(() => {
this.selectedOptions = ['option1', 'option3']; // 设置选中的选项数组以进行回显
});
}
};
</script>
```

在上述示例中,我们使用 `:value` 属性为 `el-option` 组件设置唯一的值。然后,我们在 `mounted` 钩子函数中使用 `$nextTick` 方法设置选中的选项数组 `selectedOptions`,以便进行回显。

确保在 `el-select` 组件上使用了 `:multiple="true"` 属性来启用多选模式,并且将选中的选项值设置为 `selectedOptions` 数组。

通过以上步骤,`el-select` 组件应该能够成功回显绑定的选项数组。

希望这对你有所帮助!如果你还有任何其他问题,请随时提问。

标签:选项,el,option,回显,value,element,select
From: https://www.cnblogs.com/czb1218/p/17580204.html

相关文章

  • el-image的一系列坑
    今天做自己博客的时候,想试试elment-plus的image组件,结果不用不知道,一用吓一跳 坑1:无法加载相对路径向el-image的src里写入"../../myGift/LoveLetter/assets/images/a.png",结果发现请求错误,而用原生img可以正常显示正确请求是: http://localhost:5173/src/myGift/LoveLetter/......
  • kernel-pwn之ret2dir利用技巧
    前言ret2dir是2014年在USENIX发表的一篇论文,该论文提出针对ret2usr提出的SMEP、SMAP等保护的绕过。全称为return-to-direct-mappedmemory,返回直接映射的内存。ret2dir在SMEP与SMAP等用于隔离用户与内核空间的保护出现时,内核中常用的利用手法是ret2usr,如下图所示(图片来自论文)。......
  • Element-ui源码解析(二):最简单的组件Button
    好家伙,为了有足够的能力去开发组件,先研究一下别人的组件开始抄袭模仿我们的行业标杆element-ui 找到Button组件的源码 只有三个文件,看上去非常易读,开搞  其中最重要的部分,自然是button.vue<template><buttonclass="el-button"@click="handl......
  • el-input样式修改
    我们在使用第三方提供的开源组件的时候,基本上都会存在修改样式的问题。比如Elementui中的el-input 样式与项目中的不一致,那么就得修改。那应该如何来处理呢?按钮command(mac)进入定义的文件中:找到了“后置元素的class”,然后就可以修改了。<stylelang="scss"scoped>......
  • 使用 bat 脚本调用 powershell 脚本时遇到的问题
    如果powershell脚本中,有一些涉及相对路径的操作,会发现这样运行的powershell并不是在期望的目录中,需要重新设置一下当前工作目录:powershell-CommandSet-Location-LiteralPath"%cd%";".\test.ps1"通过Set-Location命令即可实现此需求。参考:https://stackoverflow.co......
  • 1.2 HELLO 三角形
    这一节,我觉得是相当有难度的。渲染一个三角形,就需要介绍GLSL语言,图形渲染管线(GraphicsPipeline)以及着色器(Shader),标准化设备坐标(NDC)等诸多概念。图形渲染管线和坐标系统的变换当然很重要,但是我们现在还不需要懂,只要暂且弄懂这几件事就好了。目录至少要知道这个吧:我们在干啥?需要......
  • /tmp/ccVJLYWf.s:589: Error: selected processor does not support `cpsid i' in ARM
    linux20@ubuntu:~/Desktop/new$arm-none-eabi-gcc-cec_main.c/tmp/ccVJLYWf.s:Assemblermessages:/tmp/ccVJLYWf.s:589:Error:selectedprocessordoesnotsupport`cpsidi'inARMmode编译时遇到这个问题应该如何解决这个错误信息表明您的代码中使用了cpsidi指令,但......
  • vscode code helper占用大量CPU
    解决方法。1、去掉跟踪过滤。查一下百度一大堆。2、基本上1没多大作用3、所以使用禁用所有插件功能。插件-》扩展-》三个点-》禁止所有插件4、然后再开自己需要的插件5、问题解决。......
  • 通过iptables转发后的端口telnet通但是curl不通的问题
    今天遇到一个问题,一个隔离安全域的服务器需要访问承载网上的gitlab,但是无法直接做互通,所以需要通过iptables转发一次。完成iptables规则后,发现telnet端口是通的但是curlhttp:地址加端口就会返回不通。于是不停的改iptables规则,甚至放行forword规则,最后检查发现是存在外网的代理(代......
  • 1.1 HELLO 窗口
    跟着教程,开始第一步创建窗口吧!这一节不涉及太多知识。本节会出现一些名词,我们现在只需要知道它们大概是干什么的就行。●GLFW:一个专门针对OpenGL的C语言库,通过它提供的接口,我们就可以渲染物体了;●GLAD:用来管理OpenGL函数指针的库,在调用所有OpenGL函数之前,我们要初始GLAD;●......