快捷導(dǎo)航

element-ui 插槽自定義樣式居中效果實(shí)現(xiàn)思路

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

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

場景：使用element-ui組件，scope內(nèi)部自定義樣式導(dǎo)致的錯(cuò)位
效果圖：

在這里插入圖片描述

解決思路： template標(biāo)簽可理解為一個(gè)內(nèi)嵌組件，寬高重新定義，可在自定義內(nèi)容外層套一層盒子，讓盒子占滿所有空間，再使用flex讓內(nèi)部元素居中
實(shí)現(xiàn)：

HTML呈現(xiàn)

<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呈現(xiàn)

.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 = '已驗(yàn)收'
		      item.color = 'green'
		      break;
		    case 4:
		      item.orderStatus = '已拒收'
		      item.color = 'red'
		      break;
		    default:
		      item.orderStatus = '待定'
		  }
		  return item;
		})
	})
}

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

您可能感興趣的文章: