创建灵活的表单布局，每行显示不同长度的输入框

1.项目中需要对表单中某一行的位置进行移动，但是会遇到问题，比如：有时一行需要显示一个输入框，有时一行需要显示两个输入框，你根据后端返回的数据进行循环渲染，就会有问题，利用row和col布局，一行显示一个是没有问题的，但是如果一行显示两个就会有问题，移动位置也会出现问题，搞了一下午，终于整出来了，特此记录一下。

2.话不多说，直接展示

  computed: {
    inputRows() {
      // Group inputs into rows based on isShort value
      const rows = [];
      let currentRow = [];
       //this.entityData是后端返回的数据
      for (const input of this.entityData) {
        if (currentRow.length === 0 || input.isShort === currentRow[0].isShort) {
          currentRow.push(input);
        } else {
          rows.push(currentRow);
          currentRow = [input];
        }
      }
      if (currentRow.length > 0) {
        rows.push(currentRow);
      }
      return rows;
    }
  },

应该我不说你们也应该知道computed是干什么的

之后就是渲染的问题了

    <a-row v-for="(rowInputs, rowIndex) in inputRows" :key="rowIndex">
      <a-col v-for="input in rowInputs" :key="input.order" :span="getColSpan(input.isShort)">
        <input type="text" :placeholder="input.label" class="input-field" />
      </a-col>
    </a-row>

 现在基本就差不多了，之后你就可以根据你自己的项目需求在进行修改即可。

觉得还不错的话，一键三连哦！