element分割线el-divider:
项目需要使用到竖线,但是排版不是多行的,自定义了样式,使用el-divider的竖线分隔;
原api地址:https://element.eleme.cn/#/zh-CN/component/divider
html
<div class="demo-search-div"> <el-row :gutter="20" style="height:80px;"> <el-col :span="12" > <div style="display:inline-grid"> <span class="spd-info">采购计划单号</span> <span class="spd-info">制单人</span> <span class="spd-info">备注</span> </div> <el-divider direction="vertical" content-position="center"/> <div style="display:inline-grid"> <span class="spd-info">采购计划单号</span> <span class="spd-info">制单人</span> <span class="spd-info">备注</span> </div> </el-col> <el-col :span="12"> <div style="display:inline-grid"> <span class="spd-info">采购院区</span> <span class="spd-info">制单时间</span> </div> <el-divider direction="vertical" content-position="center"/> <div style="display:inline-grid"> <span class="spd-info">采购院区</span> <span class="spd-info">制单时间</span> </div> </el-col> </el-row> </div>
css
<style scoped> .demo-search-div >>> .el-divider--vertical{ height: 80px; vertical-align: text-top; } .spd-info{ padding:3px 0; } </style>