1、清除配置allow-clear

在ant design react组件中，表单组件默认都有清除按钮（输入框右侧的小黑叉号），在vue组件中需要自己配置，即给组件加上allow-clear属性

并且所有组件都支持这个属性，a-input、a-select、a-textarea、a-date-picker等都支持

<a-form-item label="用户名">
    <a-input 
        v-decorator="['username', { initialValue: model?.username || '', rules:[{required:true,message:'请输入用户名'}] }]" 
        placeholder="请输入用户名" 
        allow-clear
  />
</a-form-item>

效果如下

2、a-select搜索功能

a-select的搜索功能需要加上show-search配置，

<a-form-item label="公司名称">
    <a-select
        show-search
        v-decorator="['cid', {initialValue: model?.cid || '', rules: [{required: true,message:'请选择公司'}]}]"
        placeholder="请选择公司"
        allow-clear
        optionFilterProp="children"
    >
        <a-select-option v-for="company in companyData" :key="company.id">
            {{ company.name }}
        </a-select-option>
    </a-select>
</a-form-item>

效果如下

但有时候搜索功能并不能正确显示搜索结果

具体原因没有深究，不过可以通过配置optionFilterProp="children"来实现正确的搜索功能

3、rules的使用

ant design表单组件是通过v-decorator来识别不同组件的，如下

v-decorator="['cid', {initialValue: model?.cid || '', rules: [{required: true,message:'请选择公司'}]}]"

• 第一个参数 cid就是和这个组件的name，表单提交后获取到的也是这个值

• initialValue是初始化赋值

• rules是规则设置，

  required：是必填项设置，设置后，页面组件会显示红色'*'表示必填

  max：最大长度

  min：最小长度

  len：固定长度

  （还有其他属性不再多说）

4、占位字符placeholder的使用

可直接给组件配置上placeholder="站位字符"，

特殊说明：

有时候placeholder配置了，但页面还是没显示，显示的是空白，这时候可能给组件赋值了空值，即使赋值是null，依然不显示占位字符，

需要赋值undefined才可以，

这一点是和react组件不一样的地方，

react组件中，赋值null表示空值，会显示占位字符，

但在vue组件中，需要赋值undefined才表示空值，才会显示占位字符

另外时间范围组件a-range-picker的placeholder是两个值，需要配置数组才行

5、a-textarea的行数设置

直接设置 rows="5"即可

<a-form-item label="需求详情">
    <a-textarea 
        v-decorator="['content', { initialValue: model?.content || '', rules:[{required:true,message:'请输入需求详情'},{max:200,message: '最多可输入200字符'}] }]" 
        placeholder="请输入需求详情" 
        rows="5" 
        allow-clear 
    />
</a-form-item>

6、help设置

直接在a-form-item设置help="说明"即可

<a-form-item label="需求图片" help="最多可上传6张图片">