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

     

     

  • 相关阅读:
    设置允许跨域访问
    设计模式学习笔记(1)——单例模式
    yii2 request文件简介
    YII2 添加全局自定义函数
    第2章 查询基础
    第1章 数据库和SQL
    第0章 绪论
    用户贷款风险预测—特征提取
    用户贷款风险预测—数据探索
    Python 数据分析—画图
  • 原文地址:https://www.cnblogs.com/tong2018/p/14436226.html
Copyright © 2020-2023  润新知