在做一些管理后台的项目中,表格时最常见的,当有时数据字段多时往往会用滚动条,但从用户体验角度讲,肯定需要多展示信息,那么可能需要一个单元格放多个字段,这时候表头就需要换行。

具体实现如下:

// 注意,slot-scope采用了两种写法,一种正常取值,一种是解构
<el-table border :data="tableData" v-loading="loadData" element-loading-text="正在加载中..." stripe>
<el-table-column prop="insideNumber" label="ID" width="" align="center" :key="Math.random()">
<template slot-scope="scope">
<span @click="openDetailTab(scope.row.id)" style="color: green; cursor: pointer">{{scope.row.id}}</span>
</template>
</el-table-column> <el-table-column prop="createdDate" label="性别/年龄" align="center" width="" :key="Math.random()" :render-header="renderheader">
<template slot-scope="{ row }"> // 解构
<div>{{ row.sex }}</div>
<div>{{ row.age }}</div>
</template>
</el-table-column> <el-table-column prop="orderTypeStr" label="班级/年级" align="center" width="" :key="Math.random()" :render-header="renderheader">
<template slot-scope="scope"> // 正常取值
<div>{{ scope.row.class }}</div>
<div>{{ scope.row.grade }}</div>
</template>
</el-table-column> <el-table-column prop="deliveryNumber" label="班级名次/年级名次" align="center" width="230px" :key="Math.random()" :render-header="renderheader">
<template slot-scope="{ row }">
<div>{{ row.classOrder }}</div>
<div>{{ row.gradeOrder }}</div>
</template>
</el-table-column>
</el-table>

主要是通过 el-table-column 预留的内置方法 render-header 

methods: {
renderheader(h, { column, $index }) {
return h('span', {}, [
h('span', {}, column.label.split('/')[]),
h('br'),
h('span', {}, column.label.split('/')[])
])
},
}

最终效果图如下

el-table表格标题换行的更多相关文章

  1. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  2. element-ui 表格标题换行

     render-header: 列标题 Label 区域渲染使用的 Function <template> <el-table :data="dataList"& ...

  3. 12 Servlet_04 Servlet增删改查 静态页面与动态页面 EL表达式 table表格的一些样式

    今天学习了servlet的增删改查: 存储数据 setAttribute(String name,Object obj );获取数据 getAttribute(String name);删除数据 re ...

  4. table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行

    table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...

  5. html table 表格

    前面的话 在CSS出现之前,table元素常常用来布局.这种做法在HTML4之后不再推荐使用.而现在有些矫枉过正,使用table展示数据都可能会被说不规范.本文将详细介绍HTML表格table tab ...

  6. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

  7. java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  8. element-ul二次封装table表格

    在项目中el的表格使用的地方太多了,若不进行封装,使用的时候页面会显得非常的冗余且难以维护,有时表格样式还不能做到一致:今天分享一个在工作中封装的表格 由于大多代码都在页面有介绍,就不在外面解释了 一 ...

  9. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

随机推荐

  1. elk + filebeat,6.3.2版本简单搭建,实现我们自己的集中式日志系统

    前言 刚从事开发那段时间不习惯输出日志,认为那是无用功,徒增代码量,总认为自己的代码无懈可击:老大的叮嘱.强调也都视为耳旁风,最终导致的结果是我加班排查问题,花的时间还挺长的,要复现问题.排查问题等, ...

  2. 如何在 Linux 服务器上部署多个 Tomcat

    开发管理项目时多多少少会遇到服务器不够用.一个项目分成多个子项目的情况,故研究了一下如何在一台服务器部署多个 Tomcat. 具体操作: 1.在 /tomcat/ 下部署多个 tomcat. 2.修改 ...

  3. 01-Java基本语法

    注释 单行注释:       //  注释内容 多行注释:    /* 注释内容 */ 文档注释: /**   注释内容   */ 数据类型 整型 byte    short    int    lo ...

  4. C#特性:ConditionalAttribute

    ConditionalAttribute类 msdn解释: 指示编译器应忽略方法调用或属性,除非已定义指定的条件编译符号. 命名空间: System.Diagnostics 语法: // // 摘要: ...

  5. 解决vue-cli不能初始化webpack模板的问题(vue init卡住了,解决办法)

    报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去 ...

  6. Web设计中打开新页面或页面跳转的方法

    一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...

  7. 【读书笔记】iOS-分类与协议

    分类与协议是Object-C特有概念,分类(Category)可以认为是一种继承性的扩展,而协议(Protocol)可以理解为Java中的Interface(接口)或者C++的纯虚类. 参考资料:&l ...

  8. VUE组件 之 Toast (Vue.extend 方式)

    一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component  方式实现的, ...

  9. 世界地图和主要国家的 JSON 文件

    转自:http://blog.csdn.net/chinagissoft/article/details/52136253 世界地图: world.json 美洲: 美国:USA.json 加拿大:C ...

  10. 安装VMwareTool

    对于刚刚学习Linux的小白来说,安装VMwareTool工具是一个比较迫切需要,又是些难度的活,下面就做一个简单的介绍. 第一步:点击虚拟机.或者选中需要安装的虚拟机,右键虚拟机,选中安装VMwar ...