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>
相关推荐
CodeCxil5 分钟前
基于Vue的在线Online Word文档编辑器
vue.js·编辑器·word
W.A委员会6 分钟前
大数据渲染
前端
五仁火烧7 分钟前
前端不传文件,也能用 multipart/form-data
前端·javascript·vue.js·node.js
五仁火烧11 分钟前
前端最常用的两种请求数据格式application/json 和 multipart/form-data 完全解析
前端·javascript·vue.js·json
Bigger11 分钟前
第七章:我是如何剖析 Claude Code 的性能优化与部署策略的
前端·claude·源码阅读
大连好光景12 分钟前
接口测试入门案例
前端·后端·web
冰暮流星15 分钟前
javascript案例-简易计算器
开发语言·javascript·ecmascript
卢傢蕊15 分钟前
使用Haproxy搭建Web群集
前端·haproxy
FrontAI18 分钟前
Next.js从入门到实战保姆级教程:实战项目(上)——全栈博客系统架构与核心功能
开发语言·前端·javascript·react.js·系统架构
Sheldon一蓑烟雨任平生19 分钟前
边框按钮(纯CSS)
前端·css·动态按钮·css变量·边框按钮·按钮动画