elment-table设置el-table-column的label里面的文字换行居中显示

news2025/2/23 22:40:55

效果图如下:
在这里插入图片描述

直接上代码:

        <el-table class="ut-mt-2" row-key="company" default-expand-all
            :data="stateQuery.data" style="width: 100%"
            :tree-props="{ children: 'departList', hasChildren: 'hasChildren' }">
            <el-table-column prop="date" label="日期" width="100">
            </el-table-column>
            <el-table-column prop="company" label="公司名称" width="200"> </el-table-column>
            <el-table-column prop="jan" label="部门" width="100" />
            <el-table-column prop="feb" label="姓名" width="100" />
            <el-table-column prop="mar" label="身份证号" width="100" />
            <el-table-column prop="apr" label="手机号码" width="100" />
            <el-table-column prop="may" :label="'早餐时间\n(8:00-9:00)'" width="120" />
            <el-table-column prop="jul" :label="'金额\n(餐标13元/次)'" width="120" />
            <el-table-column prop="jun" :label="'中餐时间\n(11:30-13:00)'" width="120" />
            <el-table-column prop="jul" :label="'金额\n(餐标30元/次)'" width="120" />
            <el-table-column prop="aug" :label="'晚餐时间\n(17:20-18:30)'" width="120" />
            <el-table-column prop="sep" :label="'金额\n(餐标30元/次)'" width="120" />
            <el-table-column prop="subTotal" label="合计 (元) " width="100" />
        </el-table>

主要代码:

<el-table-column prop="jul" :label="'金额\n(餐标30元/次)'" width="120" />

注意:label是取一个变量前面有冒号,变量里面取的字符串又单引号,才可正常解析\n为换行字符

文字样式:

/deep/ .el-table .cell {
    white-space: pre-line!important;
    text-align: center;
}

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

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

相关文章

使用基本ACL限制FTP访问权限示例

ACL简介 定义 访问控制列表ACL&#xff08;Access Control List&#xff09;是由一条或多条规则组成的集合。所谓规则&#xff0c;是指描述报文匹配条件的判断语句&#xff0c;这些条件可以是报文的源地址、目的地址、端口号等。 ACL本质上是一种报文过滤器&#xff0c;规则…

一起学docker系列之十八Docker可视化工具 Portainer:简介与安装

目录 前言1 简介2 安装过程2.1 创建docker容器数据卷2.2 构建运行protainer容器 3 Portainer 软件详细说明与界面导览3.1 查看本地Docker情况3.2 操作功能3.3 创建容器3.4 部署容器 4 Portainer的优势结语参考地址 前言 Docker作为容器化解决方案的热门工具&#xff0c;其可视…

C#/.NET/.NET Core优秀项目和框架2023年11月简报

前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架&#xff08;公众号每周至少推荐两个优秀的项目和框架当然节假日除外&#xff09;&#xff0c;公众号推文有项目和框架的介绍、功能特点以及部分截图等&#xff08;打不开或者打开GitHub很慢的同学可以优先查看…

海外的直播平台

1、Netflix Netflix以允许人们从众多设备观看系列和电影而闻名。用户可以开设一个帐户并添加不同的用户个人资料&#xff0c;这对于想要为整个家庭拥有单独帐户而又无需开设大量帐户并单独付款的人来说非常有用。它现在增加了一个直播服务&#xff0c;允许观众参加现场练习课程…

❀My学习Linux命令小记录(4)❀

❀My学习Linux命令小记录&#xff08;4&#xff09;❀ 目录 ❀My学习Linux命令小记录&#xff08;4&#xff09;❀ 16.>>指令 17.date指令 18.du指令 19.df指令 20.xargs指令 16.>>指令 功能说明&#xff1a;将前一个查看指令中的结果追加写入到目标文件中…

windows彻底卸载VMware虚拟机

右键停止这些服务 在任务管理器中也结束vmware 在控制面板中卸载 找到注册表 然后在【software】目录下找到【VMware&#xff0c;Inc】&#xff0c;然后选中右键删除&#xff1b; 确保C盘中也没了

九要素一体式微气象仪-难得的气象助手

WX-WQX9 九要素一体式微气象仪是一种气象仪器&#xff0c;帮助我们更好地应对各种天气情况。 一、创新科技&#xff0c;精准预测 WX-WQX9 九要素一体式微气象仪采用了传感器和数据处理技术&#xff0c;可以同时监测温度、湿度、气压、风速、风向、太阳辐射、雨量等多个气象要…

Vue学习笔记-<router-link>的replace的属性

router-link的replace属性 作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式&#xff1a;push和replace&#xff0c;其中push是追加历史记录&#xff08;将浏览的url请求入栈&#xff09;&#xff0c;replace则是替换当前记录。路由跳…

泛型算法 bind和lambda表达式

泛型算法 迭代器 bind std::bind1st: std::bind1st 用于将一个二元谓词的第一个参数绑定为指定的值。 std::bind2nd: std::bind2nd 用于将一个二元谓词的第二个参数绑定为指定的值。 lambda表达式 捕获列表 原理

四层LVS与七层Nginx负载均衡的区别

一、四层负载均衡与七层负载均衡&#xff1a; &#xff08;1&#xff09;四层负载均衡&#xff1a; 四层负载均衡工作在 OSI 七层模型的第四层&#xff08;传输层&#xff09;&#xff0c;指的是负载均衡设备通过报文中的目标IP地址、端口和负载均衡算法&#xff0c;选择到达的…

SpringBoot错误处理机制解析

SpringBoot错误处理----源码解析 文章目录 1、默认机制2、使用ExceptionHandler标识一个方法&#xff0c;处理用Controller标注的该类发生的指定错误1&#xff09;.局部错误处理部分源码2&#xff09;.测试 3、 创建一个全局错误处理类集中处理错误&#xff0c;使用Controller…

【开源】基于Vue.js的软件学院思政案例库系统

文末获取源码&#xff0c;项目编号&#xff1a; S 070 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S070。} 文末获取源码&#xff0c;项目编号&#xff1a;S070。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理员2.2 普通教师 三、系统展…

python程序将部分文件复制到指定目录

geotools-28.2中的lib一共有264个jar包&#xff0c;但我只想将部分100个左右jar包引导我的环境中&#xff0c;那个就需要从目录中找出想要的那100个jar&#xff0c;手动挑选太费时间&#xff0c;我简单的写了个小脚本来实现。 我将想要的jar文件名和路径存放到txt中&#xff0…

风控交易系统跟单系统资管软件都有哪些功能特点?

资管分仓软件的主要功能就是母账户可以添加子账号&#xff0c;并且设置出入金&#xff0c;手续费、保证金、风控等功能&#xff0c;同时监控端更可以直观的看子账户的交易情况直接折线图展示更加直观&#xff0c;在监控端的最高权限可以直接一键平仓子账户&#xff08;如果子账…

系列十三、SpringBoot的自动配置原理分析

一、概述 我们知道Java发展到现在功能十分的强大&#xff0c;生态异常的丰富&#xff0c;这里面离开不了Spring及其家族产品的支持&#xff0c;而作为Spring生态的明星产品Spring Boot可以说像王者一般的存在&#xff0c;那么的耀眼&#xff0c;那么的光彩夺目&#xff01;那么…

Optional源码分析(涉及Objects源码和Stream源码)

研究Optional源码之前先谈一谈Objects源码。 主要代码&#xff1a; ForceInlinepublic static <T> T requireNonNull(T obj) {if (obj null) {throw new NullPointerException();} else {return obj;}}ForceInlinepublic static <T> T requireNonNull(T obj, Str…

ES 快照到 S3 并从 Windows 共享目录恢复(qbit)

前言 业务需要将 Elasticsearch 快照到 AWS S3&#xff0c;再将快照拷贝到 Windows 系统&#xff0c;并恢复到 Elasticsearch。如下图所示&#xff1a; 环境 Elasticsearch 7.10.1 Windows Server 2019 Ubuntu 20.04 &#xff08;ES 宿主&#xff09; ES 集群1 安装 S3 插…

Python的文件的读写操作【侯小啾Python基础领航计划 系列(二十七)】

Python_文件的读写操作【侯小啾Python基础领航计划 系列(二十七)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…

Go 语言中的函数调用。

更好的观看体验&#xff0c;请点击——函数调用 | YinKais Blog 本文将从函数的调用惯例和参数传递方法两个方面分别介绍函数执行的过程。 1、调用惯例 对于不同的编程语言&#xff0c; 它们在调用函数的时候往往都使用相同的语法&#xff1a; somefunction(arg0, arg1) 虽…

风变科技千万营收的AIGC项目,在Fanbook成功落地,专访风变科技CMO江育麟

在AIGC时代&#xff0c;创作生产力被下放到了每一位普通人身上&#xff0c;然后用户与AIGC应用之间还存在一定的认知与技术沟壑。 最近&#xff0c;【AIGC开放社区】注意到一款AIGC课程项目受到了相当的关注&#xff0c;让许多0基础的学员轻松地学会了使用AIGC技术的基本方法。…