解决方案

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. 高性能JavaScript之加载和执行

    JS在浏览器中的性能,可以认为是开发者所面临的最重要的可行性问题.这个问题因JS的阻塞特性变得复杂,也就是说当浏览器在执行JS代码时,不能同时做其他任何事情.事实上,大多数浏览器都使用单一进程来处理U ...

  2. JavaWeb--Servlet 详解

    一.基本概念 Servlet是运行在Web服务器上的小程序,通过http协议和客户端进行交互.这里的客户端一般为浏览器,发送http请求(request)给服务器(如Tomcat).服务器接收到请求后 ...

  3. 快读模板&&快出模板

    inline int read() { ,b=; char c=getchar(); ') { if(c=='-') b=-; c=getchar(); } ') { a=(a<<)+(a ...

  4. bat脚本延时启动exe和bat文件

    @echo off ping >nul start D:\exe\a.exe start "C:\Program Files\维护工具\卸载清除一键清理系统垃圾文件.bat" ...

  5. C#三种常用的读取XML文件的方法

    下面我将介绍三种常用的读取XML文件的方法.分别是 1: 使用 XmlDocument 2: 使用 XmlTextReader 3: 使用 Linq to Xml 这里我先创建一个XML文件,名为Bo ...

  6. Python中调用c语言(简单版)

    Python中有时需要调用c程序中的函数.使用ctype库可以很方便地调用c语言.现说明方法,以及注意事项. c程序编译为.so文件: 我们需要的c语言文件为test.c,要从其中调用func(x,y ...

  7. 爬虫七之分析Ajax请求并爬取今日头条

    爬取今日头条图片 这里只讨论出现的一些问题,代码在最下面github链接里. 首先,今日头条取消了"图集"这一选项,因此对于爬虫来说效率降低了很多: 在所有代码都完成后,也许是爬取 ...

  8. vue中,基于echarts 地图实现一个人才回流的大数据展示效果

    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...

  9. reactstrap,scrollbar组件

    react-script 编译,部署,sass,less,test,helmet等 https://github.com/facebookincubator/create-react-app/blob ...

  10. flask 必知必会

    在局域网中让其它电脑访问我的网站 from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): re ...