element-ui 插槽自定義樣式居中效果實現思路

更新時間：2024年07月19日 09:58:18 作者：白嫖叫上我

這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡單來講實現思路是通過template標簽可理解為一個內嵌組件,寬高重新定義,可在自定義內容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內部元素居中,需要的朋友可以參考下

場景：使用element-ui組件，scope內部自定義樣式導致的錯位
效果圖：

在這里插入圖片描述

解決思路： template標簽可理解為一個內嵌組件，寬高重新定義，可在自定義內容外層套一層盒子，讓盒子占滿所有空間，再使用flex讓內部元素居中
實現：

HTML呈現

<el-table>
...
<el-table-column
    label="工單狀態(tài)"
    min-width="80">
    <template slot-scope="scope">
      <div class="flex flex-align-center flex-justify-center" style="height:100%;width:100%">
        <div class="orderstatus" :class="scope.row.color">{{scope.row.orderStatus}}</div>
      </div>
    </template>
</el-table-column>
...
</el-table>

CSS呈現

.orderstatus{
   width: 0.66rem;
   height: 0.27rem;
   line-height: 0.27rem;
   border-radius: 0.04rem;
   border: 0.01rem solid #fff;
 }
 .blue{
   color: #3788FF;
   border: 0.01rem solid #3788FF;
   background: rgba(55,136,255,0.3);
 }
 .deepblue{
   color: #1E77F5;
   border: 0.01rem solid #1E77F5;
   background: rgba(30,119,245,0.3);
 }
 .yellow{
   color: #ED981A;
   border: 0.01rem solid #ED981A;
   background: rgba(237,152,26,0.3);
 }
 .green{
   color: #00B825;
   border: 0.01rem solid #00B825;
   background: rgba(0,184,37,0.3);
 }
 .red{
   color: #DC2E25;
   border: 0.01rem solid #DC2E25;
   background: rgba(220,46,37,0.3);
 }
.flex {
  display: flex;
}
.flex-align-center {
  align-items: center;
}
.flex-justify-center {
  justify-content: center;
}

js部分

async init(){
	await require().then(res=>{
		this.tableData = res.data.map(item=>{
		  switch(item.docStatus){
		    case 0:
		      item.orderStatus = '待發(fā)布'
		      item.color = 'blue'
		      break;
		    case 1:
		      item.orderStatus = '待簽收'
		      item.color = 'yellow'
		      break;
		    case 2:
		      item.orderStatus = '待提審'
		      item.color = 'deepblue'
		      break;
		    case 3:
		      item.orderStatus = '已驗收'
		      item.color = 'green'
		      break;
		    case 4:
		      item.orderStatus = '已拒收'
		      item.color = 'red'
		      break;
		    default:
		      item.orderStatus = '待定'
		  }
		  return item;
		})
	})
}

到此這篇關于element-ui 插槽自定義樣式怎么居中的文章就介紹到這了,更多相關element-ui 插槽自定義樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: