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;
		})
	})
}
相关推荐
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
梁辰兴16 小时前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
梁辰兴17 小时前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
ChongYu重玉18 小时前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
csj5019 小时前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
军军君011 天前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
寻觅~流光1 天前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
好青崧1 天前
单页面和多页面的区别和优缺点
前端·vue
程序猿小D1 天前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动
好青崧2 天前
v-show和v-if的区别
vue