Слияние кода завершено, страница обновится автоматически
Последняя версия
Проблема с отображением стилей. В компоненте card>form компонент a-form-item по умолчанию имеет margin-bottom стили, что приводит к тому, что компонент не может быть вертикально центрирован внутри карточки.
Пример:
<a-card :bordered="false" class="mb-2">
<a-form ref="searchFormRef" :model="searchFormState">
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="Заголовок" name="content">
<a-input v-model:value="searchFormState.content" placeholder="Введите название заголовка" />
</a-form-item>
</a-col>
<a-col :span="6">
<a-button type="primary" @click="tableRef.refresh()">Поиск</a-button>
<a-button style="margin: 0 8px" @click="reset">Сбросить</a-button>
</a-col>
</a-row>
</a-form>
</a-card>
Решение:
Добавьте следующий код в глобальный файл стилей:
<style>
[class*="mb-"] .ant-form-item {
margin-bottom: 0 !important;
}
</style>
Примечание: компоненту a-card необходимо задать класс mb-*.
...
...