Vue中使用element-ui中，让Table表格居中对齐的设置

2023年2月18日 250次阅读 来源: 恶龙咆哮、

element-ui中Table表格居中对齐设置

1. 设置列属性 align: center

column 属性说明参数默认
align列居中方式left/center/rightleft
header-align表头居中方式left/center/right

2. 自行添加样式类

《Vue中使用element-ui中，让Table表格居中对齐的设置》
在表格中查找到默认的对齐方式 text-align : left 将其修改为 text-align :center
《Vue中使用element-ui中，让Table表格居中对齐的设置》
在style中添加样式，注意不能再scoped中，不然覆盖不掉

原因

公共库样式例如 element-ui 中的样式属于全局样式，scoped不能修改全局样式。

解决方式：

  1. 去掉scoped： 会修改全局样式，这个时候我们需要加上样式类(在父级或者当前节点)
<style> .a > .b {  
		font-size: 16px !important
	}
</style>
  1. 不去掉scoped的情况下 样式穿透： Vue-loader
	// 这两种写法可能会被某种代码检查工具识别为异味 // Vue-Loader <style scoped> .a >>> .b { 
		}
	</style> // Sass 预处理器 <style scoped lang="scss"> 　　.a > /deep/ .b{ }
	</style>
    原文作者：恶龙咆哮、
    原文地址: https://blog.csdn.net/weixin_43802813/article/details/99434935
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞