elementUI cascader 删除事件

最新推荐文章于 2024-04-01 14:41:48 发布

原创最新推荐文章于 2024-04-01 14:41:48 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

本文探讨如何实现v-model数据变化时，Vue的Cascader组件能实时刷新显示。通过`v-if`切换结合`$forceUpdate()`，解决了点击删除按钮后UI组件不响应的问题。详细介绍了删除操作的解决方案和技巧。

想要的效果：v-model动态变化，刷新cascader 的显示

this.$forceUpdate() //作用：强制刷新
这个是v-model 的变量的值变了，但页面没改变

点击删除按钮，但UI组件没有跟着变化

         <el-cascader-panel 
		         v-if="isShowAddressInfo" 
		         v-model="cascaderVal" 
		         @change="cascaderChange"
                :options="options"
                :props="{label:'value',leaf: 'key', multiple: true, checkStrictly: false}" 
                collapse-tags
                 clearable></el-cascader-panel>

用v-if解决


       delCascader(index) {
                    this.isShowAddressInfo = false；
                    this.cascaderVal.splice(index, 1)
                    this.$nextTick(() => {
                        this.isShowAddressInfo = true;
                    });
                },

这样点击删除，UI组件就会跟着变化了