• 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>

     

     

  • 相关阅读:
    Linux Process Memory Usage
    ezwinports
    Linux程序调试查看二进制文件
    Build tcpdump for ARM
    Tomcat start/stop script
    Apache+PHP+MySQL
    查看安装的glibc版本
    CodeMirror
    GeSHi Generic Syntax Highlighter
    C++命令行解析库
  • 原文地址:https://www.cnblogs.com/tong2018/p/14436226.html
Copyright © 2020-2023  润新知