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>