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

 

需求

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

原因

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

解决方案

 

<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>

最近更新

  1. TCP协议是安全的吗?

    2024-04-15 09:36:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-15 09:36:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-15 09:36:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-15 09:36:02       20 阅读

热门阅读

  1. LeetCode 1.两数之和

    2024-04-15 09:36:02       53 阅读
  2. Fortinet年度重磅发布 ,FortiOS 7.6高能登场

    2024-04-15 09:36:02       24 阅读
  3. @CrossOrigin注解解决跨域问题

    2024-04-15 09:36:02       18 阅读
  4. LeetCode 128.最长连续数列

    2024-04-15 09:36:02       22 阅读
  5. UE C++ 知识杂记

    2024-04-15 09:36:02       13 阅读
  6. Dubbo技术问答系列-NO3

    2024-04-15 09:36:02       20 阅读
  7. vscode中vue3文件中没有自动提示

    2024-04-15 09:36:02       40 阅读
  8. 作为前端TypeScript开发人员学习Rust的经验

    2024-04-15 09:36:02       17 阅读