AntDesign中a-tab的forcerender属性强制DOM渲染

Posted 2023-04-15 Felix_Openmind

    <a-tabs v-model:activeKey="activeKey" @change="clickTag">
      <a-tab-pane key="1" tab="警情" v-if="tab01Visible" :forceRender="true">
        <AssociatedElementsInformingDetail
            :informingEchoData="associatedEchoData.informing"
            />
      </a-tab-pane>
      <a-tab-pane key="2" tab="案件" v-if="tab02Visible" :forceRender="true">
        <AssociatedElementsCaseDetail
            :caseEchoData="associatedEchoData.case"
            :caseData="associatedEleKeys.case"/>
      </a-tab-pane>
  </a-tabs>

学而不思则罔，思而不学则殆！

antDesign获取表单组件的值

 getFormValue是在点击确定按钮获取表单值得事件函数，一旦执行就会执行里边的validate（）回调函数

返回的数据中有error和value两种，如果存在error那就是其中某一个表单控件出了问题（比如有一个必须填的项没有填

获取到了value后将之return出去

在从父组件中获取就可以了，在父组件中使用this.form.getFormValue.then(data)来进行获取

 getFormValue = async () => 

    const res = await this.validate();

    if (res.error) 

      return null;

    

    const obj = res.value;

    return obj;

  ;

 

　　首先引入form:  validateFieldsAndScroll 这个方法，因为form整体组件肯定是放在一个父组件中的，直接引入即可

然后直接return一个promise结果

  validate = () => 

    const 

      form:  validateFieldsAndScroll ,

     = this.props;

    return new Promise(resolve => 

      validateFieldsAndScroll((error, value) => 

        resolve( error, value );

      );

    );

  ;