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 ...
随机推荐
- LinkedList类源码浅析(二)
1.上一节介绍了LinkedList的几个基本的方法,其他方法类似,就不一一介绍: 现在再来看一个删除的方法:remove(Object o) remove方法接受一个Object参数,这里需要对参数 ...
- webdriver驱动火狐浏览器报错:Unable to find a matching set of capabilities
raise exception_class(message, screen, stacktrace)selenium.common.exceptions.SessionNotCreatedExcept ...
- 代理模式与AOP
代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联 ...
- docker—tomcat 报错:Failed to get D-Bus connection: Operation not permitted
docker search centos 查系统镜像 docker pull docker.io/centos 进入容器 [root@git opt]# docker images REPOSIT ...
- Android 带你读懂事件分发
工作有一段时间,有必要掌握事件传递的机制,最近研究了一下,记录下心得.1 Android中的事件 android中触摸事件比较多,封装中MotionEvent类中,点击.触摸.滑动是我们常用的事件 M ...
- 配置Toad链接远程Oracle数据库
当前环境: 本机系统:Win7 64位 Toad版本:11 32位 数据库:Oracle 10g =================================== 与PLSQL Develope ...
- 慕课网_Java入门第二季
第1章 类和对象 1-1 什么是类和对象 (07:36) 1-2 如何定义 Java 中的类 (07:18) 1-3 如何使用 Java 中的对象 (04:45) 1-4 练习题 1-5 Java 中 ...
- Spring Boot 自定义注册 Servlet、Filter、Listener
前言 在 Spring Boot 中已经移除了 web.xml 文件,如果需要注册添加 Servlet.Filter.Listener 为 Spring Bean,在 Spring Boot 中有两种 ...
- VTK中,定义imread()函数,读取“.vts"文件
在本程序中,定义了一个imread()函数,用于读取“.vts”文件,第一个参数为文件路径,第二个参数为输出对象,可以输出为tkStructuredGrid型对象,也可以输出为vtkActor型对象. ...
- vue-cli本地环境API代理设置和解决跨域
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cooki ...