ant-design-vue select选择器重置

最新推荐文章于 2024-09-26 21:52:31 发布

ﾉBye~

最新推荐文章于 2024-09-26 21:52:31 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_28016751/article/details/123423129

vue 专栏收录该内容

3 篇文章

订阅专栏

在Vue.js应用中，当尝试通过设置`organId`为`undefined`来重置下拉框（select）选择值时，可能会遇到选择器无法正确显示清空状态的问题。这通常是由于组件的`allowClear`属性和循环生成的`select-option`导致的。解决方案是使用`v-model`在`select`标签上绑定值，并确保在重置时设置为`undefined`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：触发"重置"按钮，将下拉框值所选值清除

问题：重置方法中this.organId=''或者null后，选择值时选择器选择值不显示

当你的select-option是循环出来的时候，你点击清空以后这个值是不会清空的，当你使用组件自带的api – allowClear的时候，你会发现清空以后是undefined，所以当你清空的时候，你可以在select标签上使用v-model。

<a-row>
    <a-col :span="12">
        <a-form-model-item label="所属公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="organId">
            <a-select placeholder="请选择公司" v-model="organId"  @change="organChange($event)">
                <a-select-option v-for="(item, index) in organTree" :key="index" :value="item.id">
                    {{ item.name }}
                </a-select-option>
            </a-select>
        </a-form-model-item>
    </a-col>
</a-row>

data () {
	return {
		organId:undefined
		organTree: []
	}	
}
organChange(e) {
    this.organId = e
},
// 重置
searchResetData () {
    this.organId = undefined;
},