antdesign的form表单结合row和col灵活布局页面的用法

<a-form-item label="条件集" name="Expression" required>
  <!-- 这一块还是值得好好学习的 -->
  <a-row class="row_title">
    <a-col :span=7>
      相邻条件关联关系
    </a-col>
    <a-col :span=7>
      运算符
    </a-col>
    <a-col :span=7>
      值
    </a-col>
  </a-row>
  <a-row class="row" v-for="(item, index) in Expression" :key="index">
    <a-col :span=7>
      <a-select v-model:value="item.logicSymbol" allowClear v-if="index !== 0">
        <a-select-option value="AND">且</a-select-option>
        <a-select-option value="OR">或</a-select-option>
      </a-select>
    </a-col>
    <a-col :span=7>
      <a-select v-model:value="item.operator" allowClear>
        <a-select-option value="<">小于</a-select-option>
        <a-select-option value="<=">小于等于</a-select-option>
        <a-select-option value="=">等于</a-select-option>
        <a-select-option value=">">大于</a-select-option>
        <a-select-option value=">=">大于等于</a-select-option>
        <a-select-option value="包含">包含</a-select-option>
        <a-select-option value="不包含">不包含</a-select-option>
      </a-select>
    </a-col>
    <a-col :span=7>
      <a-input v-model:value="item.rvalue"></a-input>
    </a-col>
    <a-col :span=3>
      <Icon class="icon_add" icon="ant-design:plus-circle-outlined" size="20" @click="add(index)" />
      <Icon class="icon_delete" icon="ant-design:delete-twotone" size="20" @click="remove(index)"
        v-if="index !== 0" />
    </a-col>
  </a-row>
</a-form-item>

a-form-item结合a-row和a-col可以更灵活的布局页面.