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

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

直接上代码:

        <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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 设计模式——备忘录模式

目录 1.概述2.结构3.案例实现3.1.“白箱”备忘录模式3.2.”黑箱”备忘录模式 4.优缺点5.使用场景 1.概述 &#xff08;1&#xff09;备忘录模式 (Memento Pattern) 又称为快照模式&#xff0c;是一种行为型设计模式&#xff0c;它提供了一种保存和恢复对象状态的机制。备忘录模…

Vue3使用vue-baidu-map-3x百度地图

安装vue-baidu-map-3x&#xff1a; // vue3 $ npm install vue-baidu-map-3x --save// vue2 $ npm install vue2-baidu-map --save 全局注册/局部注册&#xff1a; import { createApp } from vue import App from ./App.vue import BaiduMap from vue-baidu-map-3xconst app …

SpringBoot 注入RedisTemplat 启动报错

需求 因为需要限制部门内多个人员同一时间操作同一批客户的需求&#xff0c;考虑下决定用Redis滑动窗口实现自过期以及并发校验。 问题 新建了个Redis工具类封装RedisTemplat 操作&#xff0c;到启动时却发现无法正常启动&#xff0c;报错注入错误。 The injection point has…

leetcode做题笔记1038. 从二叉搜索树到更大和树

给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下&#xff0c; 二叉搜索树 满足下列约束条件&#xff1a; 节点的左子树仅包含键 小于 节点键的节点。节点的右子树仅包含键 大于 节点键的节点。左右…

Spring 概述

1 了解Spring框架 1.1 框架 框架&#xff0c;特指为解决一个开放性问题而设计的具有一定约束性的基础架构。在此架构上可以根据具体问题进行扩展和定制&#xff0c;添加更多的组成部分&#xff0c;从而更迅速和方便地构建完整的解决问题方案。 框架&#xff0c;是一种可重用…

spark无法执行pi_如何验证spark搭建完毕

在配置yarn环境下的spark时&#xff0c;执行尚硅谷的以下命令发现报错&#xff0c;找不到这个也找不到那个&#xff0c;尚硅谷的代码是 bin/spark-submit \ --class org.apache.spark.examples.SparkPi \ --master yarn \ --deploy-mode cluster \ ./examples/jars/spark-exam…

初试占比7成!只考一门数据结构+学硕复录比1:1的神仙学校,大连交通大学考情分析

大连工业大学 考研难度&#xff08;☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、24专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1014字&#xff0c;预计阅读&#xff1a;3分钟 2023考情概况 大连工业…

企业电子招投标系统源码之电子招投标系统建设的重点和未来趋势

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看所…

中危漏洞!小程序优惠卷遍历

进入小程序&#xff0c;因为是一个小商城&#xff0c;所以照例先查看收货地址是否存在越权&#xff0c;以及能否未授权访问&#xff0c;但是发现不存在这些问题&#xff0c;所以去查看优惠卷 进入领券中心&#xff0c;点击领取优惠券时抓包 发现数据包&#xff0c;存在敏感参数…

【android开发-14】android中fragment用法详细介绍

1&#xff0c;fragment是什么&#xff1f; Fragment是Android中的一种组件&#xff0c;它在Android 3.0&#xff08;API级别11&#xff09;及以后的版本中引入。Fragment可以用来在Activity中添加一个或多个具有自己的用户界面的片段。它们可以与Activity进行交互&#xff0c;并…

MS8231/8232微功耗、高精度、轨到轨输入输出运算放大器

产品简述 MS8231/8232 是单通道、双通道的轨到轨输入输出单电源运 放。它们具有很低的功耗和较高的精度&#xff0c;很适合电池供电和便携 式电子系统。 MS8231/8232 具有稳定的单位增益特性&#xff0c;并具有 13kHz 的信 号带宽&#xff0c;使其适合电池电流检测和传…

Ant Design Pro初始化报错

今天按照官网步骤初始化项目&#xff0c;第一次报错 fatal: unable to access https://github.com/ant-design/ant-design-pro/: SSL certificate problem: unable to get local issuer certificate 致命&#xff1a;无法访问https://github.com/ant-design/ant-design-pro/&…

虾皮数据分析网站:了解Shopee市场趋势与优化运营的利器

在如今的电商时代&#xff0c;越来越多的人选择在虾皮购物&#xff08;Shopee&#xff09;平台上开设自己的店铺。然而&#xff0c;要在这个竞争激烈的市场中脱颖而出并取得成功&#xff0c;并不是一件容易的事情。为了更好地了解市场趋势、优化产品和店铺运营&#xff0c;了解…

直流负载的核心组成

直流负载的核心组成包括电源、电阻和电流表&#xff0c;电源是直流负载的能量来源&#xff0c;通常采用直流电源或电池。电阻是直流负载的负载元件&#xff0c;用于消耗电流并产生电功率。电流表用于测量通过电阻的电流大小&#xff0c;在实际应用中&#xff0c;直流负载还可能…

全屏显示功能

全屏显示功能 screenfull 依赖下载 yarn add screenfull --save-dev使用 <template><!-- 全屏的字体图标 --><header><i class"iconfont icon-quanping"> </i></header> </template> <script> import screenfull …

openGauss学习笔记-142 openGauss 数据库运维-例行维护-导出并查看wdr诊断报告

文章目录 openGauss学习笔记-142 openGauss 数据库运维-例行维护-导出并查看wdr诊断报告 openGauss学习笔记-142 openGauss 数据库运维-例行维护-导出并查看wdr诊断报告 生成快照数据需参数enable_wdr_snapshoton&#xff0c;访问WDR快照数据需要sysadmin或monadmin权限&#…

Bad file descriptor (C:\ci\zeromq_1602704446950\work\src\epoll.cpp:100)

文章目录 报错信息问题原因解决方案 报错信息 Bad file descriptor (C:\ci\zeromq_1602704446950\work\src\epoll.cpp:100) 问题原因 更新 pandas 的时候自动安装了高版本的 pyzmq 依赖库。而 jupyter 依赖的是 pyzmq19.0.2 版本的。 同时&#xff0c;如果win电脑是中文的用户…

vs-code之vue3插件

1.Vue 3 Support - All In One Vue3 代码片段突出显示了 Visual Studio Code 的格式化程序生成器 生成vue3对应的的代码 如ref等&#xff0c; 2.Volar 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生&#xff0c;作为 Vue2 配套的 VSCode 插件&#xff0c;它的主…

冰酒为什么贵?一篇给你讲清楚

冰酒因为昂贵被定义为&#xff1a;颜色和价格都如同黄金的奢侈品。那么&#xff0c;号称液体黄金的冰酒为什么这么贵呢&#xff1f;云仓酒庄给大家讲讲清楚。 云仓酒庄多品牌多代言运营模式&#xff0c;邀请当红明星来出席或代言自身产品&#xff0c;找到与品牌自身形象、调性相…

智能优化算法应用:基于和声算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于和声算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于和声算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.和声算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…