老师请教一下 reset form 的时候没有reset switch 开关的值,请问如果需要reset switch 组件应该怎么做呢?

来源:-

isjia

2020-09-22 21:36

如题,麻烦老师了。谢谢

写回答 关注

3回答

  • 沁尘
    2020-09-23 00:26:48
    已采纳

    同学你好,是具体哪一小节的内容呢?

    isjia

    老师, 5-2 新增期刊内容,这里面提到 reset form ,就是在关闭对话框的时候会进行表单重置,使用了element ui 的 `this.$refs.form.resetFields()` 这个用法,但是这个用法并不会 reset <el-switch> 这个组件。如果希望reset这个组件应该怎么写?是不是把 temp.isActive 设置为false?

    2020-09-23 00:59:24

    共 1 条回复 >

  • 沁尘
    2020-09-23 21:49:12

    同学你好,感谢你的反馈,视频中这里处理有不当之处,可做如下调整:

    // src/view/content/List.vue

    handAdd() {

          this.dialogTitle = '添加内容'

          this.showDialog = true

          // 添加初始化操作

          this.temp = {

              id: null,

              image: null,

              type: null,

              title: null,

              content: null,

              url: null,

              pubdate: '',

              status: 0,

          }

    },


    resetFields()方法应该主要运用在页面不发生跳转或者交互的情况下“重置表单”这种场景。如果是关闭窗口的重置数据,还是需要我们手动赋值初始化一下,当然我们这里依然是需要通过调用这个方法来去除关闭前可能存在的表单校验信息。


  • isjia
    2020-09-23 01:03:35

    试了试,增加在 resetForm 方法中增加 

    this.temp['isActive'] = null

    这样可以重置<el-switch>这个组件的值。

    另外就是在edit content的时候对话框如果按取消关闭的话,也需要重置一下 temp 对象的值,否则接下来在新增的话会带入上次的值。

    沁尘

    可以这么操作,但不够优雅,晚点我核实下。通常情况下,this.temp作为form表单的model的值传给表单组件之后,表单组件内部其实会生成一份副本,调用resetFields()方法的时候,会去拿这份副本实现表单初始化的效果。这里的el-switch没有初始化,那可能是在给this.temp 初始化的时候赋值上有点问题。

    2020-09-23 09:49:42

    共 1 条回复 >

0到1快速构建自己的后台管理系统

开源框架LIN-CMS+NodeJS+Vue 快速构建UI好看+功能便捷的后台管理系统

21500 学习 · 145 问题

查看课程

相似问题