解决方案

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组件内容换行的更多相关文章

  1. element table 组件内容换行方案

    element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...

  2. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  3. Vue+ElementUI 导航组件

    创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件.至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改 ...

  4. 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

  5. vue.js table组件封装

    table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...

  6. Vue Element-ui table只展开一行

    直接上代码了哈~ <template> <div class="app-content"> <div class="table_expand ...

  7. vue中element-ui table列名lable换行问题 ---亲测

    1.lable操作 :label = "'xxxxx \n xxxxx'" // 注意 lable 的: 注:双引号内有单引号,这样才可以解析文本.需要换行的文本处添加 \n 2. ...

  8. vue的table组件

    一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...

  9. Vue+element-ui 重置组件样式的写法

    两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css'   方案2:每个.vu ...

随机推荐

  1. 第六周总结 & 实验报告(四)

    第六周小结 一.instanceof关键字         在Java中使用instanceof关键字判断一个对象到底是哪个类的实例,返回boolean类型 1.instanceof关键字的作用 例c ...

  2. Linux_Ubuntu之用户目录

    位于/home/user,称之为用户工作目录或家目录,表示方式: /home/user ~

  3. WPF 模拟迅雷TabControl界面

    WPF模拟迅雷TabControl界面 点击查看下载 <!--TabControl样式--> <Style x:Key="TabControlStyle" Tar ...

  4. 阶段3 2.Spring_03.Spring的 IOC 和 DI_1 ioc的概念和作用

    IOC的含义 new的方式创建对象,是主动去找对象.对我的资源独立就变的很难,因为这有明显的依赖关系 第二种方式创建对象.app断开了和资源的联系,.而是去找工厂要一个资源.由工厂负责和资源去的联系, ...

  5. 运行上次失败用例(--lf 和 --ff)

    前言 “80%的bug集中在20%的模块,越是容易出现bug的模块,bug是越改越多“平常我们做手工测试的时候,比如用100个用例需要执行,其中10个用例失败了,当开发修复完bug后,我们一般是重点测 ...

  6. fixture详细介绍-作为参数传入,error和failed区别

    前言 fixture是pytest的核心功能,也是亮点功能,熟练掌握fixture的使用方法,pytest用起来才会得心应手! fixture简介 fixture的目的是提供一个固定基线,在该基线上测 ...

  7. Spring AOP junit错误整理

    1.[spring][Xlint:invalidAbsoluteTypeName]error 首先说一下最基本的错误,使用AOP的pointcut的expression表达式必须是正确的,表达式规则相 ...

  8. 从AWSome Day你可以学到什么?

    前言: AWS中国资深技术专家将带领你循序渐进的了解AWS主要核心服务,包括:计算(Compute).存储(Storage).数据库(Database).网络(Networking)以及安全性(Sec ...

  9. 【DSP开发】【VS开发】MUX和DEMUX的含义

    MUX和DEMUX Mux 是 Multiplex 的缩写,意为"多路传输",其实就是"混流"."封装"的意思,与"合成" ...

  10. 使用ocelot作为api网关

    新建网站项目然后添加ocelot 的nuget包 新建ocelot.json的网关的配置文件 { "GlobalConfiguration": { "BaseUrl&qu ...