Ant Design Vue 使用记载

一、form之form-item的label自定义，使用插槽，自定义template

 <a-form-item class="formitem">
        <template v-slot:label>
          <span class="myheadline">项目名称</span>
        </template>
        <a-input
          style="width: 500px"
          allow-clear
          placeholder="请输入项目名称"
          v-decorator="[
            'projectName',
            { rules: [{ required: true, type: 'string', message: '请输入项目名称', whitespace: true }] }
          ]"
          disabled
        />
      </a-form-item>

二、如果表单需要在一行上展示多个，则使用row与col指定

<a-row class="form-row" :gutter="24">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item class="formitem formiteminline" label="姓名">
            <a-input
              style="width: 500px"
              allow-clear
              placeholder="请输入姓名"
              v-decorator="[
                'householder',
                { rules: [{ required: true, type: 'string', message: '请输入姓名', whitespace: true }] }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item class="formitem formiteminline" label="身份证号">
            <a-input
              style="width: 500px"
              allow-clear
              placeholder="请输入身份证号"
              v-decorator="[
                'householder',
                { rules: [{ required: true, type: 'string', message: '请输入身份证号', whitespace: true }] }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>

三、css样式之display: flex使用，设置在父元素的样式上，则父元素和所有子元素都在一行展示

这篇好文章是转载于：学新通技术网