vue中下拉菜单的赋值问题

谁践踏了优雅 2024-04-06 13:11 64阅读 0赞

两个下拉菜单关联，一个变化了影响另一个的内容以及活性的设置，需要注意的是，赋值的时候要是用this.$set进行赋值

html代码

<el-form-item label="调整模式" prop="changeMode">  
<el-select v-model="form.changeMode" placeholder="请输入调整模式" filterable clearable style="width: 100%"  
@change="handleChange">  
<el-option v-for="dict in dict.type.change\_mode"  
:key="dict.value"  
:label="dict.label"  
:value="dict.value"></el-option>  
</el-select>  
</el-form-item>  
<el-form-item label="调整类型" prop="changeType">  
<el-select v-model="form.changeType" placeholder="请输入调整类型" clearable filterable style="width: 100%"  
:disabled="showChangeType">  
<el-option v-for="dict in dict.type.change\_type"  
:key="dict.value"  
:value="dict.value"  
:label="dict.label"></el-option>  
</el-select>  
</el-form-item>

js代码

/\*\*状态改变事件\*/  
handleChange(val) \{  
if (val == 1) \{  
this.showChangeType = true;  
this.$set(this.form, "changeType", "1");  
\} else \{  
this.showChangeType = false;  
this.$set(this.form, "changeType", "");  
\}  
\},

网上有其他人使用过下面这个方式进行赋值，但是我试了一下，不好用，本人推荐使用上面的方式进行赋值

this.$set(this.form, this.form.changeType, "1");

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中下拉菜单的赋值问题

两个下拉菜单关联，一个变化了影响另一个的内容以及活性的设置，需要注意的是，赋值的时候要是用this.$set进行赋值 html代码 <el-form-item label=

谁践踏了优雅/ 2024年04月06日 13:11/ 0 赞/ 65 阅读

相关下拉菜单

![在这里插入图片描述][20200614163018558.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

ゝ一世哀愁。/ 2023年02月17日 14:30/ 0 赞/ 251 阅读

相关 Vue 实现下拉菜单树

效果：使用 Vue-Treeselect 实现 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

「爱情、让人受尽委屈。」/ 2022年12月16日 11:00/ 0 赞/ 462 阅读

相关 vue-element的select下拉框赋值

当返回值是对象数组的时候 <template> <el-select v-model="value" placeholder="请选择">

浅浅的花香味﹌/ 2022年12月09日 14:00/ 0 赞/ 365 阅读

相关 vue-element的select下拉框赋值

当返回值是对象数组的时候 <template> <el-select v-model="value" placeholder="请选择">

￡神魔★判官ぃ/ 2022年12月06日 01:22/ 0 赞/ 290 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 373 阅读

相关 Vue实现自定义下拉菜单

先看例子，后面有对用到的知识点的总结效果图： ![70][] 实现代码如下： <!DOCTYPE html> <html lang="en">

墨蓝/ 2022年05月20日 07:58/ 0 赞/ 405 阅读

相关下拉菜单的实现

CSS实现下拉菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

落日映苍穹つ/ 2021年12月16日 08:53/ 0 赞/ 440 阅读

相关【下拉菜单】随前一个下拉菜单内容变化而变化的下拉菜单

`` <body> <form id="form1" runat="server" method="post"> <!--省份下拉菜单

淡淡的烟草味﹌/ 2021年09月26日 00:42/ 0 赞/ 512 阅读

相关 Vue.js--下拉菜单组件

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

冷不防/ 2021年08月13日 18:35/ 0 赞/ 436 阅读