1.在select标签上绑定change事件
<el-form-item label="参数" prop="paramType">
<el-select v-model="form.paramType" placeholder="请选择参数" clearable size="small" style="width: 200px;" @change="handleSelectChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
2.在Methods里写方法
方法一：switch
/*参数选择*/
handleSelectChange(type){ //选择框选中值改变
switch (type) {
case '1':
console.log("111111111")
$(".fourCS").hide();
$(".sevenCS").show();
break;
case '2':
console.log("22222222")
$(".fourCS").show();
$(".sevenCS").hide();
break;
}
}
方法二：if判断
handleSelectChange(type){ //选择框选中值改变
if (type == '1') {
$(".fourCS").hide();
$(".sevenCS").show();
} else if(type == '2') {
$(".fourCS").show();
$(".sevenCS").hide();
}
}
注：在vue中用Jquery，要选安装jquery库， 具体做法看下一篇《vue中jquery引法 或 $ is not defined错误解决方法》
效果如下图：
文章来源：https://www.toymoban.com/news/detail-630875.html
文章来源地址https://www.toymoban.com/news/detail-630875.html
到了这里，关于vue中element UI的 select值改变，内容改变方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
