element plus表格的表头和内容居中

news2024/12/23 10:13:06

文章目录

    • 需求
    • 分析

需求

对于 element-plus 中的 table 进行表头和内容的居中显示
在这里插入图片描述

分析

  1. 单列的表头和内容居中 :
    在对应的那一列加上align=“center” 即可
<el-table-column prop="name" label="商品名称" align="center" />
  1. 表格的所有列表的头和内容居中:
    在el-table上添加下面两行即可

:cell-style=“{ textAlign: ‘center’ }”
:header-cell-style=“{ ‘text-align’: ‘center’ }”

<el-table 
	fit 
	:cell-style="{ textAlign: 'center' }" 
	:data="tableData" 
	style="
		width: 100%" 
		height="350"
       :header-cell-style="{
         background: '#f7f7f7',
         color: 'rgba(0,0,0,.85)',
         'font-weight': '500',
         'text-align': 'center'
       }" 
       v-loading="loading"
  >
     <el-table-column prop="name" label="商品名称" />
  </el-table>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1405082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Golang 中如何实现 Set

在Go编程中&#xff0c;数据结构的选择对解决问题至关重要。本文将探讨如何在 GO 中实现 set 和 bitset 两种数据结构&#xff0c;以及它们在Go中的应用场景。 Go 的数据结构 Go 内置的数据结构并不多。工作中&#xff0c;我们最常用的两种数据结构分别是 slice 和 map&#…

安防视频监控EasyCVR平台HTTP-FMP4播放协议在分屏播放时的性能优化

安防视频监控EasyCVR平台兼容性强&#xff0c;可支持的接入协议众多&#xff0c;包括国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等。平台能将接入的视频…

String对象的探究(new String到底创建了多少对象?)

String对象的探究 1. 前言&#xff08;String&#xff09;2. new String()到底创建了多少对象&#xff08;java8举例&#xff09;&#xff1f;2.1. new String("abc")&#xff1a;2/12.2. String str “a” "b" “c”&#xff1a;12.3. String abc &quo…

【MySQL源码】Seconds_Behind_Master是如何计算的

作为MySQL DBA&#xff0c;相信大家对参数 Seconds_Behind_Master 并不陌生&#xff0c;该字段的值可以通过 show slave status\G的输出&#xff0c;表示主从延迟的时间&#xff0c;单位为秒。监控主从延迟一般取这个值就足够了。0 表示无延迟&#xff0c;理想状态该值不要超…

JavaWeb之JavaScript-Vue --黑马笔记

什么是JavaScript&#xff1f; JavaScript&#xff08;简称&#xff1a;JS&#xff09; 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的&#xff0c;它能使网页可交互。 JavaScript 和 Java 是完全不同的语言&#xff0c;不论是概念还是设计。但是基础语法类似。 …

【动态规划】879. 盈利计划

作者推荐 【动态规划】【广度优先搜索】【状态压缩】847 访问所有节点的最短路径 本文涉及知识点 动态规划汇总 LeetCode879. 盈利计划 集团里有 n 名员工&#xff0c;他们可以完成各种各样的工作创造利润。 第 i 种工作会产生 profit[i] 的利润&#xff0c;它要求 group[…

用flinkcdc debezium来捕获数据库的删除内容

我在用flinkcdc把数据从sqlserver写到doris 正常情况下sqlserver有删除数据&#xff0c;doris是能捕获到并很快同步删除的。 但是我现在情况是doris做为数仓&#xff0c;数据写到ods&#xff0c;ods的数据还会通过flink计算后写入dwd层&#xff0c;所以此时ods的数据是删除了…

java SSM自助快递服务平台myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM自助快递服务平台是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

【设计模式】字节三面:请举例阐释访问者模式

今天我们要一起探讨的主题是一种设计模式——访问者模式(Visitor Pattern)。我将从最基础的概念、应用场景&#xff0c;再到实例代码的展示&#xff0c;全方位的为大家剖析访问者模式。而且&#xff0c;我保证&#xff0c;你即使是编程新手&#xff0c;也能理解并开始应用这个设…

Unity3D控制人物移动的多种方法

系列文章目录 unity知识点 文章目录 系列文章目录前言一、人物移动之键盘移动1-1、代码如下1-2、效果 二、人物移动之跟随鼠标点击移动2-1、代码如下2-2、效果 三、人物移动之刚体移动3-1、代码如下3-2、效果 四、人物移动之第一人称控制器移动4-1、代码如下4-2、效果 五、And…

P9232 [蓝桥杯 2023 省 A] 更小的数

[蓝桥杯 2023 省 A] 更小的数 终于本弱一次通关了一道研究生组别的题了[普及/提高−] 一道较为简单的双指针题,但一定有更好的解法. 题目描述 小蓝有一个长度均为 n n n 且仅由数字字符 0 ∼ 9 0 \sim 9 0∼9 组成的字符串&#xff0c;下标从 0 0 0 到 n − 1 n-1 n−1&a…

three.js从入门到精通系列教程052 - 制作立方体添加重影特效

<html><head><meta charset"UTF-8"><title>three.js从入门到精通系列教程052 - 制作立方体添加重影特效</title><script src"ThreeJS/three.js"></script><script src"ThreeJS/jquery.js"><…

精品基于Uniapp+springboot智慧校园管理系统App课程选课成绩

《[含文档PPT源码等]精品基于Uniappspringboot智慧校园管理系统App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm …

动态规划—— 求最长不下降序列LIS【集训笔记】

题目描述 设有由n(1≤n≤200)个整数组成的数列&#xff0c;记为:b(1)、b(2)、……、b(n)&#xff0c;若存在i1<i2<i3<…<ie 且有b(i1)<b(i2)<…<b(ie)则称为长度为e的不下降序列。程序要求&#xff0c;当原数列出之后&#xff0c;求出最长的不下降序列。 …

第16章_网络编程拓展练习(TCP编程,UDP编程)

文章目录 第16章_网络编程拓展练习TCP编程1、学生与老师交互2、查询单词3、拓展&#xff1a;查询单词4、图片上传5、拓展&#xff1a;图片上传6、多个客户端上传文件7、群聊 UDP编程8、群发消息 第16章_网络编程拓展练习 TCP编程 1、学生与老师交互 案例&#xff1a;客户端模…

vue的模板语法-指令-事件绑定-条件渲染

VSCode代码片段生成 我们在前面练习Vue的过程中&#xff0c;有些代码片段是需要经常写的&#xff0c;我们再VSCode中我们可以生成一个代码片段&#xff0c;方便我们快速生成。 VSCode中的代码片段有固定的格式&#xff0c;所以我们一般会借助于一个在线工具来完成。 具体的步…

前端模板字符串的使用

目录 1.说明 2.示例 3.总结 1.说明 模板字符串是用反引号&#xff08;&#xff09;分隔的字面量&#xff0c;允许多行字符串&#xff0c;带有嵌入表达式的字符串插值和一种带标签的模板的特殊结构。 是增强版的字符串&#xff0c;在进行字符串拼接时&#xff0c;可以拼接固…

基本的 Socket 模型

什么是Socket Socket 的中文名叫作插口&#xff0c;咋一看还挺迷惑的。事实上&#xff0c;双方要进行网络通信前&#xff0c;各自得创建一个 Socket&#xff0c;这相当于客户端和服务器都开了一个“口子”&#xff0c;双方读取和发送数据的时候&#xff0c;都通过这个“口子”…

机器学习 | 深入理解并掌握核心概念

在如今数字化时代的浪潮下&#xff0c;机器学习已经成为人工智能领域的璀璨明星。它像一面魔镜&#xff0c;赋予计算机系统学习和改进的能力&#xff0c;让机器能够从海量数据中提取规律、预测未来&#xff0c;甚至做出智能决策。本 专栏 将带您踏上机器学习的奇妙之旅&#xf…

什么是 Web3.0

什么是Web3.0 对于 Web3.0 的解释网上有很多&#xff0c;目前来说 Web3.0 是一个趋势&#xff0c;尚未有明确的定义。我们今天讨论下几个核心的点&#xff0c;就能很好的理解 Web3.0 要解决哪些问题 谁创造数据&#xff0c;这里的数据可以是一篇博客&#xff0c;一段视频&…