Element-UI弹性布局教程：使用el-row和el-col实现自动换行

<el-form :model="searchForm"> <el-row :gutter="15"> <el-col :xs="24" :sm="12" :md="6"> <el-form-item label="问卷标题"> <el-input v-model="searchForm.dcWjTitle" placeholder="输入问卷标题" clearable /> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="6"> <el-form-item label="被测评人ID"> <el-input v-model="searchForm.dcid" placeholder="输入被测评人ID" clearable /> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="6"> <el-form-item label="人员部门"> <el-select v-model="searchForm.dcDept" placeholder="选择部门" clearable > ... </el-select> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="6"> <el-form-item label="提交状态"> <el-select v-model="searchForm.state" placeholder="选择状态" clearable > ... </el-select> </el-form-item> </el-col> <el-col :xs="24" :sm="24" :md="6"> <el-form-item> <el-button type="primary" @click="handleSearch" icon="el-icon-search" class="mobile-full-width" >搜索</el-button> </el-form-item> </el-col> </el-row> </el-form>

<el-select v-model="dataForm.proviceId" placeholder="省份" @change="handleChange"> <el-option v-for="item in provices" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> <el-select v-model="dataForm.cityId" placeholder="城市" @change="handleChange2"> <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> <el-select v-model="dataForm.districtId" placeholder="区县"> <el-option v-for="item in districts" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select>