Element UI 主动清空Cascader级联选择器Select选择器

2022年8月11日 1649点热度 0人点赞 0条评论

Element UI 主动清空Cascader级联选择器Select选择器

 

在Element UI的实际使用中,会碰见需要根据特定条件自动清空已经选择的Select内容或者Cascader内容,这个普通的数据重置方法不会让选项重置,内容是没有了,但是Select的状态还是有内容的状态;

所以此时就需要使用
this.$set(this.form, "taskType", "");
来对数据选项以及数据进行重置。

 

<template>
  <el-select v-model="form.value" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" @click="resetClick">重置按钮</el-button>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '0',
          label: '黄金糕'
        }, {
          value: '1',
          label: '双皮奶'
        }, {
          value: '2',
          label: '蚵仔煎'
        }, {
          value: '3',
          label: '龙须面'
        }, {
          value: '4',
          label: '北京烤鸭'
        }],
        form: {
       		value: '',
        },
      }
    },
  	methods: {
  		resetClick() {
  			this.$set(this.form, "value", "");
  		},
  	},

  }
</script>

 

帮助教程

提供最新的帮助教程,方便使用。

文章评论