组件库-特殊情况说明（element、antDesign）

一、表单 组件:

1、动态增减表单项

  • element：

　　通过v-for循环渲染的form表单校验【动态增减表单项】。https://blog.csdn.net/weixin_36894745/article/details/104887795

2、表单项校验问题：https://juejin.cn/post/7037771165485498398 

  • 隐藏的元素仍然触发校验：

    • v-if         没有渲染的表单不会对它做校验
    • v-show  隐藏的表单还是会对它做校验的

  • 为什么 a-form-model-item有多个子元素时，无法实时监听表单元素的blur/change事件。即无法正确校验 数据 是否合法。
    原因：Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域 没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。
    解决办法：手动调用该项表单域的校验。

    <!-- ++  a-form-model-item添加ref属性 ++ -->
<a-form-model-item ref="number" label="提醒间隔" prop="number">
  <span style="margin-right: 5px">每隔</span>
  
  <!-- ++ a-input添加blur事件,调用Dom的onFieldBlur方法 ++ -->
  <a-input
    style="display: inline-block; width: 200px; margin-right: 5px"
    type="number"
    v-model="form.number"
    placeholder="填写数字"
    @blur="
      () => {
        $refs.number.onFieldBlur();
      }
    "
  ></a-input>
  <span>分钟提醒一次</span>
</a-form-model-item>
  • 综合多个表单元素的值再判断是否通过校验：https://juejin.cn/post/7037771165485498398#heading-1

　　重点：自定义 校验提示语组件，通过 computed 判断两个 表单 综合 的情况。

 

二、表格 组件：

1、table组件的key 的设置

  • antDesign：https://blog.csdn.net/qq_42580876/article/details/110630737
    • 方法一： 
      <a-table
     :columns="columns"
     :data-source="tableData"
     size="middle"
     :rowKey='record=>record.id'> // id为 tableData 中的一个属性
</a-table>
    • 方法二：【表格中，以index作为key还是比较多的】 
      <a-table
      :columns="columns"
      :data-source="tableData"
      size="middle"
      :rowKey="(record,index)=>{return index}"> //record 为每一条数据, index 索引
</a-table>
    • 方法三： 
      <a-table
      :columns="columns"
      :data-source="tableData"
      size="middle"
      rowKey="id">  // id为 tableData 中的一个属性 !!! 这里的rowKey不需要冒号
</a-table>

       

2、 table 组件支持自动 分页功能，即不需要后端接口分页，一次性把所有数据给前端就可以了。组件会自动根据 pageSize 显示 数据；自动 current 显示指定页面的数据。

handleTableChange(pagination){
  this.ipagination = pagination
}

3、

三、

 

posted @ 2021-05-20 11:58  吴飞ff  阅读(140)  评论(0)  编辑  收藏  举报