vue中element-ui中将多个表格放到同一行 行内表单, 当垂直方向空间受限且表单较简单时,可以在一行内放置表单。 <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="审批人"> <el-input v-model="formInline.user" placeholder="审批人"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="formInline.region" placeholder="活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> 但是这种方式有个局限性,因为在一个大的表格中,这一行只是作为一行,最外层还会嵌套一行<el-form></el-form>,这样就会导致上面的代码里面的元素出现错误(例如无法重置参数等)。 另一种解决办法:利用<el-col></el-col>这个元素例如 <el-form-item label="type1"> <el-col :span="3.5" style="padding-left:0px;"> <el-select v-model="data.value1" placeholder="API接口" clearable> <el-option v-for="(item, index) in data.type1" :label="item" :value="item" :key="index"></el-option> </el-select> </el-col> <el-col :span="1">type2</el-col> <el-col :span="3.5" prop="value2"> <el-select v-model="data.value2" placeholder="免费" clearable> <el-option v-for="(item, index) in data.type2" :label="item" :value="item" :key="index"></el-option> </el-select> </el-col> <el-col :span="1">type3</el-col> <el-col :span="3.5"> <el-select v-model="data.value3" placeholder="个人免费版" clearable> <el-option v-for="(item, index) in data.type3" :label="item" :value="item" :key="index"></el-option> </el-select> </el-col> <el-col :span="1">type4</el-col> <el-col :span="3.5"> <el-select v-model="data.value4" placeholder="种类" clearable> <el-option v-for="(item, index) in data.type4" :label="item" :value="item" :key="index"></el-option> </el-select> </el-col> <el-col :span="1">type5</el-col> <el-col :span="3.5"> <el-select v-model="data.value5" placeholder="北京采集" clearable> <el-option v-for="(item, index) in data.type5" :label="item" :value="item" :key="index"></el-option> </el-select> </el-col> </el-form-item> 这样写的话就没有毛病了 刚接触vue,这是我之前踩的坑,如有不对,请留言,谢谢~