element分割线el-divider

 

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>