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>
文章评论