This article uses ant design vue
Scenes:
In the background management system, I want to achieve such a layout
method one
Use a-row layout, which is the grid layout in ant. Use gutter to divide a row into 24 parts. Use md sm to specify the number of copies for each a-form-item to achieve a row layout
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<!-- 搜索区域 -->
<a-form layout="inline"
@keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6"
:sm="24">
<a-form-item :label="$t('m.spacename')">
<a-input :placeholder="$t('m.spanceInput')"
style="width:80%"
v-model="queryParam.reasonKey"></a-input>
</a-form-item>
</a-col>
<a-col :md="6"
:sm="24">
<a-form-item :label="$t('m.alertType')">
<a-select showSearch
optionFilterProp="title"
style="width:80%;"
:placeholder="$t('m.alertType')"
v-model="queryParam.type">
<a-select-option v-for="info in warnTypeList"
:key="info.type"
:title="info.name">
{
{ info.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6"
:sm="24">
<a-form-item :label="$t('m.time')">
<a-locale-provider :locale="locale">
<a-range-picker style="margin-bottom:10px"
:format="dateFormat"
v-model="searchTime" /><br>
</a-locale-provider>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;"
class="table-page-search-submitButtons">
<a-col :md="6"
:sm="24">
<a-button type="primary"
@click="searchQuery">{
{ $t('m.Query') }}</a-button>
<a-button style="margin-left: 8px"
@click="searchReset">{
{ $t('m.reset') }}</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>Renderings:
When the screen is very large, it appears scattered:
When the screen is small, the layout is switched according to attributes such as sm:
Method Two:
Use the inline attribute of form, refer to the code:
<a-form layout="inline">
<a-form-item :label="$t('m.spacename')">
<a-input v-model="locationName" :placeholder="$t('m.spanceInput')"></a-input>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Query')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
<a-form-item>
<a-button>{
{$t('m.Reset')}}</a-button>
</a-form-item>
</a-form>Renderings:
Does not scatter when the screen is large
Screen hour auto wrap
the difference:
When the first type is enlarged again, the layout will show a proportional layout without automatic line wrapping. If the picture is too small, it will appear too scattered, and if the picture is too large, it will appear too crowded. If you want to automatically wrap the line, or display different layouts under different screen sizes, you need to set them separately through attributes such as md sm.
The second way of writing is simple, especially suitable for form, and will automatically wrap, it is more recommended!