解决方案

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. 20175215 2018-2019-2 第五周java课程学习总结

    第六章学习内容 1.接口 使用interface来定义一个接口. 接口体中包含常量的声明(没有变量)和抽象方法两部分.接口体中只有抽象方法,没有普通的方法,而且接口体中所有的常量的访问权限一定都是pu ...

  2. openssl-1.0.1u静态库编译

    不管Windows还是linux都是需要安装好perl环境的 Windows步骤 1.解压openssl-1.0.1u.tar.gz 2.使用Vs2005命令行工具进入解压后的目录 3.执行如下命令 ...

  3. 全面解读php-php会话控制技术

    一.PHP会话控制技术 1.为什么要使用会话控制技术? 因为http协议是无状态协议,所以同一个用户在请求同一个页面两次的时候,http协议不会认为这两次请求都来自于同一个用户,会把它们当做是两次请求 ...

  4. leetcode 分割回文串

    这个方法有问题,这是计算所有子串组成的所有回文子串:而不是所有分割的回文子串: class Solution { public: vector<vector<string>> ...

  5. 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象

      ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象 1.返回顶部 1. HTML DOM Attribute 对象 HT ...

  6. ceph集群添加osd

    获取osd的ID 这个操作是在管理节点上执行 [root@node-4 osd]# ceph osd create 2 对磁盘做处理 [root@node-4 ~]# parted /dev/sdb ...

  7. 转载-Mysql主主复制架构配置

    Mysql主主复制架构配置 转载:原始出处 http://luoweiro.blog.51cto.com/2186161/658550MySQL主主复制结构区别于主从复制结构.在主主复制结构中,两台服 ...

  8. 微信小程序---设备信息

    1.学习大纲: 2.获取系统信息: wx.getSystemInfo({ success: function(res) { // success console.log(res) } }) } 3.获 ...

  9. win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法

    HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...

  10. spring aop影响dubbo返回值问题解决

    问题描述: dubbo服务已经注册,客户端调用提供者服务返回值为空.(考虑动态代理.aop的返回值影响,dubbo基于spring2.5.6.SEC03,本次开发使用的是spring4.3.8) 解决 ...