vue elementui table组件内容换行
解决方案
tableData = [
{
"name": "domain111",
"metric": [
"平均耗时",
"带宽"
],
},
{
"name": "domain112",
"metric": [
"平均耗时2",
"带宽2"
],
}
]
将tableData的数据join拼接\n换行符之后
看看white-space的值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
添加了样式:
.el-table .cell {
white-space: pre-line;
}
metric那一列数组数据就能换行了
vue elementui table组件内容换行的更多相关文章
- element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...
- 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- Vue+ElementUI 导航组件
创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件.至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改 ...
- 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug
bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...
- vue.js table组件封装
table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...
- Vue Element-ui table只展开一行
直接上代码了哈~ <template> <div class="app-content"> <div class="table_expand ...
- vue中element-ui table列名lable换行问题 ---亲测
1.lable操作 :label = "'xxxxx \n xxxxx'" // 注意 lable 的: 注:双引号内有单引号,这样才可以解析文本.需要换行的文本处添加 \n 2. ...
- vue的table组件
一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...
- Vue+element-ui 重置组件样式的写法
两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css' 方案2:每个.vu ...
随机推荐
- 第六周总结 & 实验报告(四)
第六周小结 一.instanceof关键字 在Java中使用instanceof关键字判断一个对象到底是哪个类的实例,返回boolean类型 1.instanceof关键字的作用 例c ...
- Linux_Ubuntu之用户目录
位于/home/user,称之为用户工作目录或家目录,表示方式: /home/user ~
- WPF 模拟迅雷TabControl界面
WPF模拟迅雷TabControl界面 点击查看下载 <!--TabControl样式--> <Style x:Key="TabControlStyle" Tar ...
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_1 ioc的概念和作用
IOC的含义 new的方式创建对象,是主动去找对象.对我的资源独立就变的很难,因为这有明显的依赖关系 第二种方式创建对象.app断开了和资源的联系,.而是去找工厂要一个资源.由工厂负责和资源去的联系, ...
- 运行上次失败用例(--lf 和 --ff)
前言 “80%的bug集中在20%的模块,越是容易出现bug的模块,bug是越改越多“平常我们做手工测试的时候,比如用100个用例需要执行,其中10个用例失败了,当开发修复完bug后,我们一般是重点测 ...
- fixture详细介绍-作为参数传入,error和failed区别
前言 fixture是pytest的核心功能,也是亮点功能,熟练掌握fixture的使用方法,pytest用起来才会得心应手! fixture简介 fixture的目的是提供一个固定基线,在该基线上测 ...
- Spring AOP junit错误整理
1.[spring][Xlint:invalidAbsoluteTypeName]error 首先说一下最基本的错误,使用AOP的pointcut的expression表达式必须是正确的,表达式规则相 ...
- 从AWSome Day你可以学到什么?
前言: AWS中国资深技术专家将带领你循序渐进的了解AWS主要核心服务,包括:计算(Compute).存储(Storage).数据库(Database).网络(Networking)以及安全性(Sec ...
- 【DSP开发】【VS开发】MUX和DEMUX的含义
MUX和DEMUX Mux 是 Multiplex 的缩写,意为"多路传输",其实就是"混流"."封装"的意思,与"合成" ...
- 使用ocelot作为api网关
新建网站项目然后添加ocelot 的nuget包 新建ocelot.json的网关的配置文件 { "GlobalConfiguration": { "BaseUrl&qu ...