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>
相关推荐
瓢儿菜20187 小时前
Web开发:什么是 HTTP 状态码?
前端·网络协议·http
1024小神7 小时前
swiftui使用WKWebView加载自签的https服务,允许不安全访问
前端
anyup8 小时前
支持鸿蒙!开源三个月,uView Pro 开源库近期更新全面大盘点,及未来计划
前端·vue.js·uni-app
BBB努力学习程序设计8 小时前
用Bootstrap一天搞定响应式网站:前端小白的救命稻草
前端·html
嘴平伊之豬8 小时前
跟着AI速度cli源码三-交互问答系统
前端·node.js
用户0136087566888 小时前
前端支持的主要数据类型及其使用方式
前端
代码搬运媛8 小时前
SOLID 原则在前端的应用
前端
lecepin8 小时前
AI Coding 资讯 2025-11-17
前端
孟祥_成都8 小时前
下一代组件的奥义在此!headless 组件构建思想探索!
前端·设计模式·架构
灰太狼大王灬8 小时前
Telegram 自动打包上传机器人 通过 Telegram 消息触发项目的自动打包和上传。
前端·机器人