el-form每行显示两列底部按钮居中效果的实现

  发布时间:2022-07-26 15:41:40   作者:shayloyuki   我要评论
这篇文章主要介绍了el-form每行显示两列底部按钮居中效果的实现,解决办法也很简单只需给el-form 添加 inline 属性,给每个 item 设置宽度,给底部按钮 flex 布局,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧

需求:

el-form 每行显示两列,底部按钮居中

问题:

以前的解决办法是: el-col, el-row。但是这里只有一个 el-form-itemlabel 数据是已知的,其余项都是循环得到的,数量不固定,因此不能采用 el-col 方式。

尝试

尝试过 item 左浮动,flex,底部定位,都无法解决。

解决办法

el-form 添加 inline 属性,给每个 item 设置宽度;给底部按钮 flex 布局。

参考链接

http://t.csdn.cn/nrQ0C

https://www.jb51.net/article/240039.htm

思考说明 el-form 本身是 block 块级元素;对 flex 和 定位的详细内容不是很熟悉,比如 flex:1

到此这篇关于el-form每行显示两列底部按钮居中效果的实现的文章就介绍到这了,更多相关el-form底部按钮居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

最新评论