1. 点击页面设计-新增表单，选择空白模板，此时页面会跳转到’/guide/index’

  2. 在前端项目中找到’/guide/index.vue’，该页面使用<a-card卡片布局包裹了多个子组件，这里只关注<blank>组件，父组件将initialData传递给子组件

  3. 进入blank组件,观察其核心代码,其中<a-col span="19">的span表示占用该行中24份的19份，即调整宽度

1
2
3
4
5
6
7
8
9
10
11
<a-row>
      <a-col span="5">
        <a-steps v-model="current" direction="vertical">
          <a-step v-for="item in steps" class="ant-steps-item" :disabled="true" :key="item.title" :title="item.title"/>
        </a-steps>
      </a-col>
      <a-col span="19">
        <tab-name-conf :form-name="kFormName" v-if="current === 0 " ref="tableName"/>
        <layout-style-conf :dataJson="initialData" :form-name="kFormName" v-if="current === 1"/>
      </a-col>
    </a-row>
  1. 因为当前的current值为0，所以显示<tab-name-conf>子组件，用于输入表单名称
  2. 点击下一步会调用next方法，进而使current值加1
  3. 此时会显示<layout-style-conf>子组件，该组件在created()函数中掉用了save()方法，进而调用后端的保存接口对Kform页面进行保存，并返回了kFormId，然后调用jumpKFormEdit方法，跳转到/kform/list