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

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

1. 设置列属性 align: center

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

2. 自行添加样式类


在表格中查找到默认的对齐方式 text-align : left 将其修改为 text-align :center
在这里插入图片描述
在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>

版权声明:本文为weixin_43802813原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。