使用element ui 组件的时候，如果使用两个或多个按钮在同一个单元格内，按钮会竖着排列，但是不能够对齐怎么解决？

问题例子如下：

我们发现查看和报名并不是对齐的，解决操作如下

打开浏览器的开发者模式，我的是搜狐浏览器（按F12就可以弹出）

点击右上角的方框套箭头的图标，再将鼠标移到绿色的报名按钮上点击一下，我们发现这个按钮有一个自带的左边距10px

那么我们在代码中给这个按钮的左边距设置成0即可，代码如下：

<el-table-column align="center" label="操作"><template slot-scope="scope" width="100px"><el-button size="medium" type="primary" v-if="scanAssociationActivity" icon="el-icon-search"  @click="clickScan(scope.$index, scope.row)">查看</el-button><el-button size="medium" style="margin-left: 0" type="success" v-if="addEnroll" icon="el-icon-check"  @click="clickEnroll(scope.$index, scope.row)">报名</el-button></template>
</el-table-column>

最终效果图：

使用element ui 组件的时候，如果使用两个或多个按钮在同一个单元格内，按钮会竖着排列，但是不能够对齐怎么解决？相关推荐

Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
Element：Table表格在单元格内放多个数据
在练习时候用Element的Tab表格的时候,需要在表头下的单元格内把数组的图片和名字放在同一格 (改好才发现挺憨的,这么一个简单的错误..) 但是在使用el的Tab表格时候,在<el-tabl ...
Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
Element ui 组件库使用技巧。
按需引入 babel文件配置. 配置 babel.config.js文件可以创建一个js 特意来存放我们需要的 element 组件. 在main.js 文件中全局引入上面存放组件的 js ...
vue：element ui分页改变pageSize，触发两次回调请求
1.描述: 使用element pagination组件时,如果你的currentPage在靠后的页数,这时改变pageSize,那么可能导致size-change和current-change事件同 ...
element ui 组件踩坑记录--后台管理系统-最全
说明:很久没有开发过后台管理系统,elementui都好久没有用过了,踩了一些小坑,特意记录下: element 特点:a.组件的一般输入的值/可以选择的值,都是绑定在v-model 上面 b. 在组 ...

使用element ui 组件的时候，如果使用两个或多个按钮在同一个单元格内，按钮会竖着排列，但是不能够对齐怎么解决？

使用element ui 组件的时候，如果使用两个或多个按钮在同一个单元格内，按钮会竖着排列，但是不能够对齐怎么解决？相关推荐

最新文章

热门文章