el‐row - daniel-qa/Vue GitHub Wiki

el-row

  • 動態調組 row ; 因使用 if-active，所以每個 div 還是獨立運作==> 直接調整需要的 span 就可以了

    父組件要給予夠大的 span width，細節的佈局，由子組件自己完成( 由 pan 24 計算)

 1 . 栅格系统的默认宽度：24 栅格  ( 因为 Element Plus 基于 24 等分布局 来设置列宽，即便下一層的 col 最大的 span 也是 24 )

 2 . 要配合 row 使用
  • el-row 的三等分範例
    <el-row style="background-color: #FFFFFF;">
        <el-col :span="8">Column 1</el-col>
        <el-col :span="8">Column 2</el-col>
        <el-col :span="8">Column 3</el-col>
    </el-row>
  • row 中的 col 置中
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="8">Column 4</el-col>
    <el-col :span="8">Column 5</el-col>
  </el-row>
  • row 不垂直置中，從頂部對齊 el-row 的 stylle
align-items: flex-start; /* 不垂直置中，從頂部對齊 */

<el-row style="background-color: #FFFFFF; align-items: flex-start;">

el-col

  • line-height

要修改 el-col 中每行文字的高度，你可以利用 CSS 控制文本的 line-height 屬性來設定行高。這樣可以確保每行文字之間的垂直間距符合你的需求。

.text-content p {
  margin: 5px 0; /* 控制每行文字的上下間距 */
  line-height: 1.8; /* 調整行高，改變行間距 */
}

如果 line-height 設置為數字（如 1.8），它會根據元素的字體大小進行縮放。

如果 line-height 設置為具體像素（如 20px），則每行文字的高度會固定為指定值。

.custom-col * {
  line-height: 1.8; /* 這樣所有子元素的文字行高都會改變 */
}
  • el-row 滾動的設定
.scroll-col {
  height: 200px;         /* 設置固定高度 */
  overflow-y: auto;      /* 垂直方向啟用滾動 */
  padding: 10px;         /* 可選：為內容添加內邊距 */
}

<el-row>
	<el-col :span="8" class="scroll-col">
	  <div>
		<p>這是第一行文字</p>
		<p>這是第二行文字</p>
		<p>這是第三行文字</p>      
	  </div>
	</el-col>
	<el-col :span="8">Column 2</el-col>
	<el-col :span="8">Column 3</el-col>
</el-row>
  • 最大寬度，會限制在父組器的設定寬度範圍

ex

<el-row>            
  <el-col :span="24">
    <div class="grid-content bg-purple-light">
	  <span class="head-text">選擇發送類型</span>
	</div>
  </el-col>
</el-row>

先設滿版，再調整，(確認目前顯示的範圍)

    .grid-content {
        border-radius: 4px;  /* 圓角 */
        min-height: 100vh;
        width: 100vw;
        background-color: #FFFFFF; /* 白色 */
    }
  • 調高度

如果希望 el-col 的高度設置為父元素高度的 50%，你可以使用 height: 50%。

不過需要注意的是，這樣做需要確保父元素有固定的高度，否則 50% 會無法正確計算。

<div id="app">
  <el-row type="flex" justify="center" align="middle"> 
    <el-col :span="22" >
      <div class="grid-content bg-purple">

        这是一个22栅格宽的列, 水平垂直居中:
        type="flex" justify="center" align="middle"    

      </div>    
    </el-col>
 </el-row>
  
  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
</div>
  • style

要設寬度，高度

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 50vh;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  • < el-row> 中的 type="flex" 属性 在 Element Plus 中， 组件默认是基于流式布局（block-level） 的。当你为 < el-row> 设置 type="flex" 时，它会启用 Flexbox 布局，允许你通过灵活的对齐方式来管理其中的 el-col 子元素。

  • 当 type="flex" 被添加到 时，可以通过其他的属性（如 justify 和 align）来进一步控制布局。

⚠️ **GitHub.com Fallback** ⚠️