1

今天做表单的时候重置表单,平常都没问题,但是今天有了多选框,重置的时候各种,input框,select,都能清除,但是多选框清除不了还会报错。
image.png这是没重置之前,然后点击重置;
image.png其他的都重置了,多选框重置不了;大家也可以试试自己的antd的form表单看看能不能清除;这个问题也还好,不知道是什么原因。但是这个表单是进来时用setFieldsValue设置了值的;我想重置的时候从新渲染一下这个表单,让他只有选项没有值也相当于重置了,但是不知道怎么下手。image.png我设置了v-if但是没效果;我的想法是点击清除按钮 this.show=false this.show=true让他从新渲染一遍然后设置表单的初始数据,比如有哪些选项,label的名字,这个表单是动态的,表单的名字,类型,选项先渲染,这是步骤一,然后setFieldsValue这样设置初始值这是步骤二。我的做法是刚才提过的用v-if然后从新渲染步骤一达到重置的效果,才接触vue这个该怎么操作了?antd这里的重置不知道哪里出了问题了,写法都一样死活清除不了` <a-form-item v-bind="formItemLayout" label="Checkbox.Group">

  <a-checkbox-group
    v-decorator="['checkbox-group']"
    style="width: 100%;"
  >
    <a-row>
      <a-col :span="8">
        <a-checkbox value="A">
          A
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="B">
          B
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="C">
          C
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="D">
          D
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="E">
          E
        </a-checkbox>
      </a-col>
    </a-row>
  </a-checkbox-group>
</a-form-item>`
老药 54
11月8日提问
2 个回答
2

已采纳

像Angular、 Vue、React 这样的 MVVM 框架为了减少 DOM 操作,会竭其所能复用原有的 DOM节点,当 model 发生变化的时候,通过 diff 变化前后的 model 来确定需要重新渲染哪些节点,如果节点的某个属性没有被记录在 model 中的话,这个属性将不在 diff 的考虑之内。
所以这里 checkboxGroup 可能没有绑定相应的 model ,导致 Vue 没有监听其值的变化。题主可以给 <a-checkbox-group> bind 一个 :key="{{Math.random()}}",或者在setFeildValue的同时也修改一下 checkboxGroup 的key ,如果成功重置 checkboxGroup 的话,说明问题确实出在这里,需要 显式地将每一个<a-checkbox> 的 checked 值绑定到 data 中去
当然,我对 Vue 指令的执行时机不太了解,所以不知道 Math.random() 是不是每次渲染都要执行的,更不知道 Vue 会不会跳过 checkBoxGroup 去 diff checkBox,上述方法可能没法诊断问题所在。但是使用 MVVM 框架的一个原则就是:所有可能变化的值都需要写在 model 里,对于 Vue 而言就是写在 data 或者 computed 等会影响渲染的地方,对于 React 就是写在 state 里,对于微信小程序就是 data 和 properties 里。

0

antd的那个问题没有解决,不过也没关系;方法有很多种,首先是这是个动态表单,先渲染表单项,在渲染表单值;重置表单可以考虑setFeildValue把每个值都设置为空;但是我的页面这么做有点繁琐;后面还是考虑,从新渲染表单,之前 this.show=false this.show=true这么做可能不能引起数据的更新,加上
clipboard.png
延迟以后, updated()钩子多执行了一次,最开始没加估计在一个函数里面这并不能触发vue的数据改变驱动;。用:key值不行,想着和v-if的原理应该差不多,但是antd的多选框会疯狂报错;最后选择了用v-if,然后这里的settimeout改成 this.$nextTick这个属性要好一些

撰写答案

推广链接