Vue+TDesgin在dialog或者drawer里面表单数据的重置问题

原创

逝水经年

发布于 2022-05-21 18:27:37

1K0

发布于 2022-05-21 18:27:37

文章被收录于专栏：数据可视化

前情提要

最近在使用TDesign和Vue2搞一个系统，碰到这么个情况，需要在dialog或者在drawer内置一个form，这样会让表单在当前页面弹出，而避免了打开新一个页面的尴尬，但是在form提交后，在dialog或者在drawer动画退出的过程中，会有残影看到校验标红，这个小细节需要优化一下，所以就有了以下这篇文章。

简单粗暴的方法

网络上搜来搜去看到的都是这个办法了，通过v-if直接控制dialog或者drawer组件销毁和创建。

但是这个方法有弊端：

1.如果频繁切换，会导致消耗高；

2.TDesign优秀的进入和退出动效没了。

完美的方法

其实也蛮简单的，清除表单数据的时候，把rules给置空，再在dialog或者在drawer打开的时候把rules赋值上去，这样就可以得到一个完美的动画过渡。

// 表单校验规则
const INIT_RULES = {}
// 表单初始化data
const INIT_DATA = {
    title: '',
    content: ''
}
export default {
    // ...
    methods: {
        // 清除表单数据
        clearFormData(){
            // 清空rules
            this.form.rules = {};
            // 清空表单数据
            this.form.data = { ...INIT_DATA };
        },
        // 打开dialog或drawer
        open(){
			// 重新给rules赋值
            this.form.rules = { ...INIT_RULES };
            // 打开dialog
            this.dialog.show = true;
        }
    }
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js