搜索框和按钮放在同一行

如何将搜索框和按钮放在同行？？

这样看起来超难看，所以想把搜索框和按钮放在同一行，这样的话，使界面更美观。

我个人认为分两种：第一种是简单的放在同一行就行，输入框和按钮分开放在一行；第二种就是输入框和按钮紧挨在一起，形成一个小整体。

看下面包含两种的效果：

这里我借助的是饿了么的“布局”，官方文档

第一种：输入框和按钮同一行

总共将局分成了24个格，也就是：psan=24,gutter来控制每个el-col格子之间的大小。这里我就是借助element UI 的布局来是实现的，先是在el-row中划分成两个el-col 写法：<el-row :gutter="10"><el-col :span="12"></el-col><el-col :span="12"></el-col></el-row>

然后分别在el-col中写入<el-input style="width:80%;" v-model="search_data" placeholder="请输入搜索的关键字"></el-input>和<el-button></el-button>

<el-row :gutter="10">
	<el-col :span="12">
		<el-input type="text" palceholder=""></el-input>
	</el-col>
	<el-col :span="12">
		<el-button></el-button>
	</el-col>
</el-row>

写到这里，按钮合并如果你也想把多个按钮做成图中这种，简单

<el-button-group>
	<el-button type="primary" plain round size="medium"></el-button>
	<el-button type="" plain round size="medium"></el-button>
	<el-button type="" plain round size="medium"></el-button>
</el-button-group>

type值可以为“primary”、"warning"、"danger"、"info"
plain的效果是鼠标点击，颜色加重，离开变淡
round使按钮的∠变得更加有弧度，也可以是circle
size表示大小。从大到小排序：medium、small、mini

这样就可以实现上面的那个效果图了

第二种：输入框和按钮合并
写法很简单，在<el-input></el-input>中加入<template slot="append"><el-button></el-button></template>就可以实现了

<el-input style="width:80%;" v-model="search_data" placeholder="请输入搜索的关键字">
	<template slot="append">
		<el-button type="primary" plain @click="">查找</el-button>
	</template>
</el-input>

就这么一句就可以了，注意：这里必须写<template slot="append">，否则，输入框还是与按钮分开的。

整体效果图代码：

<div style="padding:5px;">
                        <el-row :gutter="10">
                            <el-col :span="14">
                                <el-input style="width:80%;" v-model="search_data" placeholder="请输入搜索的关键字"><template slot="append"><el-button type="primary" plain @click="">查找</el-button></template></el-input>
                            </el-col>
                            <el-col :span="10" style="text-align:center;">
                                <el-row :gutter="0">
                                    <el-col :span="24">
                                        <el-button-group>
                                        <el-button type="primary" plain round @click="getTbale()">添加或保存</el-button>
                                        <el-button type="warning" plain round @click="reset()">重置</el-button>
                                        <el-button type="primary" plain round @click="">过滤？</el-button>
                                        <el-button type="warning" plain round @click="">清楚？</el-button>
                                        </el-button-group>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>