Element-UI 下拉框单选转多选回显不清空绑定的值

需求

根据radio切换来更改下拉框是否多选

原因

单选和多选这两个 input 看上去没差别(自身和层级都一致),vue出于提高性能,所以 vue 给复用了

解决方案
html 复制代码
<template>
  <section>
    <el-radio-group v-model="radio" @input="changeRadio">
      <el-radio :label="1">单选</el-radio>
      <el-radio :label="2">多选</el-radio>
    </el-radio-group>
    <el-select value-key="radio==2?'two':'one'" v-model="chooseVal" :multiple="radio==2" placeholder="请选择">
      <el-option v-for="item in Enums.GetElementUiSelectOptions(Enums.DiseaseTypes)" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
    </el-select>
  </section>
</template>
<script>
export default {
  
  data() {
    
    return {
      radio: 1,
      chooseVal:'',
    };
  },
  mounted() {
  },
  methods: {
    changeRadio(val){
      console.log('dddd',val);
      if(val==1){
        this.chooseVal = '';
      }else{
        this.chooseVal = [];
      }
    },
  }
};
</script>
相关推荐
ZXT1 分钟前
面试精讲-同源策略
前端
只会写Bug的程序员10 分钟前
面试之《react服务器组件--RSC》
服务器·前端·react.js
计算机-秋大田19 分钟前
基于SpringBoot的美食信息推荐系统设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
じ☆ve 清风°19 分钟前
JavaScript基本知识
开发语言·javascript
鱼樱前端23 分钟前
王者技能之最新Axios + TS + Element Plus 企业级二次封装(完整版)
前端·javascript·vue.js
向上的车轮25 分钟前
前端UI编程基础知识:基础三要素(结构→表现→行为)
前端·ui
海岸边的破木船27 分钟前
CSS 容器查询完全指南:从基础到高级应用与浏览器兼容策略
前端
厚礼蟹man31 分钟前
一键打通api、TS、mock
前端·typescript·前端工程化
H04833 分钟前
记录uni-app使用plus注意事项【AI生成】
前端·微信小程序
Json_43 分钟前
vue history 模式下 编译多入口文件和 nginx 配置文件
前端·vue.js·nginx