Layout- When using el-row Layout, the scaling is out of place
Problem description
- When using el-row and EL-Col to layout the page, the page can be scaled and scrambled
- The problem occurred under one el-row with multiple El-col
Show the code
// There is a problem with the el-row
<el-row style="display:flex; flex-warp:warp;">
<el-col class="mb12 w420">
<el-form-item label="Posting Time">
<el-date-picker class="select-time-datetimerange" v-model="timeList1"
type="datetimerange" range-separator="⇀" start-placeholder="Start time"
end-placeholder="End time" unlink-panels :default-time="[' 00:00:00 ', '23:59:00]"
format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" align="left"
@change="(time)=>{selectTwoTimeHandle(time,'billStartTime','billEndTime')}">
</el-date-picker>
</el-form-item>
</el-col>
<el-col class="mb12 w420">
<el-form-item label="Order Payment Method">
<el-select v-model="filters.paymentType" clearable placeholder="Please select"
style="width:300px;">
<el-option v-for="item in zfList" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col class="mb12 w420">
<el-form-item label="Collection status">
<el-select v-model="filters.isReceipt" clearable placeholder="Please select"
style="width:300px;" @change="selectIsReceipt">
<el-option v-for="item in zdStatusList" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col class="mb12 w420">
<el-form-item label="Collection status">
<el-select v-model="filters.isReceipt" clearable placeholder="Please select"
style="width:300px;" @change="selectIsReceipt">
<el-option v-for="item in zdStatusList" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col class="mb12 w420">
<el-form-item label="Collection status">
<el-select v-model="filters.isReceipt" clearable placeholder="Please select"
style="width:300px;" @change="selectIsReceipt">
<el-option v-for="item in zdStatusList" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
Copy the code
The solution
<el-row style=" display: flex; flex-wrap: wrap;">
</el-row>
Copy the code