element table表格合并行和列
element-ui 官网案例: table合并行或列
通过给table
传入span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
<el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"sortablelabel="数值 1"></el-table-column><el-table-columnprop="amount2"sortablelabel="数值 2"></el-table-column><el-table-columnprop="amount3"sortablelabel="数值 3"></el-table-column></el-table>
element-ui中table表格合并的各参数的意义
1. 有4个参数返回:row,column,rowIndex,columnIndex;
row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,
rowIndex,columnIndex是当前行和列的序号
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { //用于设置要合并的列if (rowIndex % 2 === 0) { //用于设置合并开始的行号return {rowspan: 2, //合并的行数colspan: 1 //合并的列数,设为0则直接不显示};} else {return {rowspan: 0,colspan: 0};}}}
2.表格合并行和列注释 if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
if (columnIndex === 0) {if (rowIndex === 0) { // 合并第一行到第四行,从第一行开始,共4行return {rowspan: 4,colspan: 1}} else if (rowIndex === 4) { // 合并第五行到第九行,从第五行开始,共5行return {rowspan: 5,colspan: 1}} else if (rowIndex === 9) { // 合并第10行到第14行,从第10行开始,共5行return {rowspan: 5,colspan: 1}} else { // 其余被合并的行,诸如1、2、3、5、6、7、8、10、11、12、13全都设为0return {rowspan: 0,colspan: 0}}
}
element table表格合并行和列相关推荐
- element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
- element table 表格合并及如何默认选中合并后的第一行
1. 合并效果及代码如下: 1.表格头 2.js 合并前的每一个小行都会执行一此下面这个代码,如上图所示,执行第一行时合并,执行到第二行设置合并行数为0 就可以了 objectSpanMethod({ ...
- table 表格合并
table 表格合并 开发工具与关键技术:DW.JavaScript 作者:刘东标 撰写时间:2019-03-14 <div ><div><span>colspan ...
- elementUI table表格合并相同的内容
elementUI table表格合并相同的内容 1.表格和数据 表格是这样 数据(由于数据太多,只展示了几个) tableData: [{one: '1 . 产出指标',two: '1 .1 数量指 ...
- element table表格里的多选按钮,根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- 修改elementui的表格合并行和表格表头边框
前言 修改elementui的表格合并行和表格表头边框需要注意的地方 一.为什么有时候修改了样式却没有生效? 当我们在修改elementui的样式的时候发现样式不生效的时候,需要查看是否给需要的元素添 ...
- Excel表格里行和列的数据进行交换(转置)
<script language=jscript> function toggleDisplay(me){ if (me.style.display=="inline" ...
- element table v-for动态隐藏列
element table v-for动态隐藏列 这个动态列是我项目中觉得比较好玩的一个功能,他列表不固定,后端数据库表也不固定,其实还有个高级筛选,这两个是配套使用的, <el-tablere ...
最新文章
- 在一个集合S中寻找最大的C使A+B=C且A,B,C均在集合当中
- 初试BMap时出现BMap is not defined错误(HTML页面)
- 小凡模拟器使用视频(续)
- C语言经典算法 21-30
- oracle分区表扩分区 很慢,升级oracle10g 大分区表update变慢
- PDFMiner:python 读取 pdf 内容
- linux睡眠进程,linux一个进程如何睡眠
- 任秀计算机音乐,重磅丨15家主流媒体聚焦全球音乐院校校长交流季
- hibernate简单入门教程(四)---------关联映射
- Windows核心编程_调用控制台窗口
- MySQL免安装版 图文教程【5.7版本,纯净版win7安装】
- 人脸识别Demo解析C#
- Java job interview:WinForm桌面小程序设计思想及项目实现思路
- 为Ubuntu安装中文语言包
- QPSK映射关系与差分编码
- 好用的5款火狐浏览器必备插件,每一款都很实用
- python调用有道翻译_Python通过调用有道翻译api实现翻译功能示例
- 【分治】大整数乘法(C++)
- 大数据技术之Sqoop
- WebGL和OpenGL的区别及关系