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 ...
随机推荐
- 20175215 2018-2019-2 第五周java课程学习总结
第六章学习内容 1.接口 使用interface来定义一个接口. 接口体中包含常量的声明(没有变量)和抽象方法两部分.接口体中只有抽象方法,没有普通的方法,而且接口体中所有的常量的访问权限一定都是pu ...
- openssl-1.0.1u静态库编译
不管Windows还是linux都是需要安装好perl环境的 Windows步骤 1.解压openssl-1.0.1u.tar.gz 2.使用Vs2005命令行工具进入解压后的目录 3.执行如下命令 ...
- 全面解读php-php会话控制技术
一.PHP会话控制技术 1.为什么要使用会话控制技术? 因为http协议是无状态协议,所以同一个用户在请求同一个页面两次的时候,http协议不会认为这两次请求都来自于同一个用户,会把它们当做是两次请求 ...
- leetcode 分割回文串
这个方法有问题,这是计算所有子串组成的所有回文子串:而不是所有分割的回文子串: class Solution { public: vector<vector<string>> ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象 1.返回顶部 1. HTML DOM Attribute 对象 HT ...
- ceph集群添加osd
获取osd的ID 这个操作是在管理节点上执行 [root@node-4 osd]# ceph osd create 2 对磁盘做处理 [root@node-4 ~]# parted /dev/sdb ...
- 转载-Mysql主主复制架构配置
Mysql主主复制架构配置 转载:原始出处 http://luoweiro.blog.51cto.com/2186161/658550MySQL主主复制结构区别于主从复制结构.在主主复制结构中,两台服 ...
- 微信小程序---设备信息
1.学习大纲: 2.获取系统信息: wx.getSystemInfo({ success: function(res) { // success console.log(res) } }) } 3.获 ...
- win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法
HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...
- spring aop影响dubbo返回值问题解决
问题描述: dubbo服务已经注册,客户端调用提供者服务返回值为空.(考虑动态代理.aop的返回值影响,dubbo基于spring2.5.6.SEC03,本次开发使用的是spring4.3.8) 解决 ...