v-row

a-row的指令版。
解决为某些布局启用栅格化时需要用a-row、a-col层层包裹的问题，尤其是form表单。

代码演示

基本用法

form表单栅格化

<template>
  <a-form ref="formRef" layout="vertical" :model="formState" v-row="24">
    <a-form-item label="用户名称" name="username" v-col="12">
      <a-input v-model:value="formState.username" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="密码" name="password" v-col="12">
      <a-input-password
        v-model:value="formState.password"
        placeholder="请输入"
      />
    </a-form-item>
    <a-form-item label="部门" name="dept" v-col="12">
      <a-input v-model:value="formState.dept" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="年龄" name="age" v-col="12">
      <a-input-number
        :min="0"
        :max="100"
        v-model:value="formState.age"
        placeholder="请输入"
        style="width: 100%"
      />
    </a-form-item>
    <a-form-item label="备注" name="remark" v-col="24">
      <a-textarea v-model:value="formState.remark" placeholder="请输入" />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
const formState = ref<any>({});
</script>