el-table表格标题换行
在做一些管理后台的项目中,表格时最常见的,当有时数据字段多时往往会用滚动条,但从用户体验角度讲,肯定需要多展示信息,那么可能需要一个单元格放多个字段,这时候表头就需要换行。
具体实现如下:
// 注意,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表格标题换行的更多相关文章
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- element-ui 表格标题换行
render-header: 列标题 Label 区域渲染使用的 Function <template> <el-table :data="dataList"& ...
- 12 Servlet_04 Servlet增删改查 静态页面与动态页面 EL表达式 table表格的一些样式
今天学习了servlet的增删改查: 存储数据 setAttribute(String name,Object obj );获取数据 getAttribute(String name);删除数据 re ...
- table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行
table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...
- html table 表格
前面的话 在CSS出现之前,table元素常常用来布局.这种做法在HTML4之后不再推荐使用.而现在有些矫枉过正,使用table展示数据都可能会被说不规范.本文将详细介绍HTML表格table tab ...
- html5常用标签table表格布局
html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- element-ul二次封装table表格
在项目中el的表格使用的地方太多了,若不进行封装,使用的时候页面会显得非常的冗余且难以维护,有时表格样式还不能做到一致:今天分享一个在工作中封装的表格 由于大多代码都在页面有介绍,就不在外面解释了 一 ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
随机推荐
- docker使用技巧小记
1.在使用docker的时候有很多人习惯使用官方镜像.有的人喜欢自己制作镜像,有的时候都是使用默认的配置启动的服务,或者自己在制作镜像的时候直接将配置文件打包到镜像里面了.有的时候会碰到要修改配置文件 ...
- 主从热备+负载均衡(LVS + keepalived)
前言 淘宝架构师李智慧大牛的书籍<大型网站技术架构>以及旭龙兄的博客 --->[大型网站技术实践]初级篇:借助LVS+Keepalived实现负载均衡. 从上参考而得来本文,本文旨 ...
- FFmpeg内存IO模式(内存区作输入或输出)
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10318145.html 所谓内存IO,在FFmpeg中叫作"buffered ...
- EF 查询所有字段
1简单方式 var query=db.StudentScore.Where(r=> r.SubjectId==subjectId).Select(g=>g).ToList(); 2 var ...
- 关于Unsupported major.minor version 52.0解决办法(再次回顾)
对于web项目的配置问题,在很大程度上,tomcat的版本问题起到很大的决定性因素,例如以上问题:Unsupported major.minor version 52.0 表示stanford par ...
- Ajax实现的城市二级联动一
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...
- CTO 之“六脉神剑”
他深谙电商之道,从零打造 1 号店网站及供应链系统,以技术引领业务发展.他是欧电云创始人韩军,下面将由他分享完美 CTO “六脉神剑”的经验之谈. 首先,从对 CTO 的一个认识误区讲起. 不写代码的 ...
- 《.NET之美》之程序集
一.什么是程序集(Assembly)? 经由编译器编译得到的,供CLR进一步编译执行的那个中间产物,在WINDOWS系统中,它一般表现为·dll或者是·exe的格式,但是要注意,它们跟普通意义上的WI ...
- 【代码笔记】Web-ionic-列表
一,效果图. 二,index.html代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- QQ浏览器兼容模式问题
今天客户反馈有个问题,他说用360浏览器的兼容模式无法登陆系统,我试了可以,接着试了IE11,也可以,然后跟经理汇报,他说他用qq浏览器兼容模式就不可以,于是我试了,果然不可以... 问题是酱紫的:输 ...