解决方案

  1. tableData = [
  2. {
  3. "name": "domain111",
  4. "metric": [
  5. "平均耗时",
  6. "带宽"
  7. ],
  8. },
  9. {
  10. "name": "domain112",
  11. "metric": [
  12. "平均耗时2",
  13. "带宽2"
  14. ],
  15. }
  16. ]

  

将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. 第六周课程总结&实验报告(四)

    实验报告(四) 一.实验目的 1.掌握类的继承 2.变量的继承和覆盖,方法的继承,重载和覆盖的实现 二.实验的内容 1.根据下面的要求实现圆类Circle. 圆类Circle的成员变量:radius表 ...

  2. DS博客大作业--树

    1.树的存储结构说明 树节点结构体 data:文件名 brother:兄弟节点 child:孩子节点 type:节点的类型,0为文件,1为目录 h:节点所在的层次 2.树的函数说明 头文件 函数1:C ...

  3. SQLite 数据类型与C#数据类型对应表

        SQLite 数据类型 C# 数据类型   BIGINT Int64   BIGUINT UInt64   BINARY Binary   BIT Boolean 首选 BLOB Binary ...

  4. 【剑指offer37】二叉树的序列化

    序列化过程很简单,如果是采用先序序列,那么对先序遍历做出改变即可: 层序遍历建立二叉树,如: 1 2        3 4   #     5   6 输入第一行:将要输入的节点的个数N,如上面的为7 ...

  5. Jmeter(十一)测试监听

    性能测试监控的主要任务是获取运行状态收集测试结果, 再对测试结果进行分析. 测试结果有事务响应时间,吞吐量及服务器硬件性能 , 数据库性能状态等等. Jmeter对长时间执行测试计划使用的监听器主要是 ...

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

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

  7. cento7忘记root密码怎么办

    1.首先开启系统,一直按 e 键 进入编辑选项 2.光标下移,在UTF-8行这一段修改两处,首相找到ro改为rw,即只读改为可读写权限:然后在这段的尾部加入 init=/bin/sh 3.此时按住Ct ...

  8. python关键字参数和位置参数

    关键字参数必须跟随在位置参数后面! 因为python函数在解析参数时, 是按照顺序来的, 位置参数是必须先满足, 才能考虑其他可变参数.,否则报错如下: In [74]: print(s1.forma ...

  9. Centos7 yum 源安装nginx

    一.建立nginx源 vim /etc/yum.repos.d/nginx.repo [nginx]name=nginx repobaseurl=http://nginx.org/packages/c ...

  10. 6.3.2巴特沃斯(butterworth)低通滤波器

    在本程序中,共有六个自定义函数,分别是: 1. myMagnitude(Mat & complexImg,Mat & magnitudeImage),在该函数中封装了Opencv中的 ...