element-ui 插槽自定义样式怎么居中

场景 :使用element-ui组件,scope内部自定义样式导致的错位
效果图
解决思路 : template标签可理解为一个内嵌组件,宽高重新定义,可在自定义内容外层套一层盒子,让盒子占满所有空间,再使用flex让内部元素居中
实现

  1. HTML呈现
html 复制代码
<el-table>
...
<el-table-column
    label="工单状态"
    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>
  1. CSS呈现
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;
}
  1. js部分
javascript 复制代码
async init(){
	await require().then(res=>{
		this.tableData = res.data.map(item=>{
		  switch(item.docStatus){
		    case 0:
		      item.orderStatus = '待发布'
		      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;
		})
	})
}
相关推荐
ytgytg287 分钟前
芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
java·vue
没逛够12 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
学会煎墙13 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
神膘护体小月半16 小时前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
console.log('npc')1 天前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐1 天前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
江拥羡橙1 天前
css实现拼图样式,响应不同屏幕宽度
vue·less·css3·html5·1024程序员节·calc
惜.己2 天前
从零使用vue脚手架开发一个简易的计算器
vue·js·1024程序员节
@AfeiyuO2 天前
el-table 表格嵌套表格
前端·elementui·vue
飞鸟真人2 天前
VUE+Electron从0开始搭建开发环境
electron·vue