Element table组件单元格合并(横向,纵向,表头)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
近期做项目有合并单元格的案例,所以简单的解释如下
分为两部分一部分为头部的合并另一部分为表体的合并
表头的合并
首先要知道 header-cell-style 这个合并头部的方法
解释如下:
b
包括四个参数分别是 row column rowIndex columnIndex
row column 行 列 rowIndex 行下标 columnIndex列下标
下标可以参考下面这张图~
实现方法:
disCountHeader({ row, column, rowIndex, columnIndex }) {
console.log(row, column, rowIndex, columnIndex)
if(rowIndex == 1 || rowIndex == 2){
return { display:"none" }
}
},
当rowIndex为1或者2时进行隐藏掉 就合并头部具体的可以按照情况去判断
表体的合并
和表头合并原理一样
span-method
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
按照条件判断 return 一个数组[ 1,2] <==>rowspan: 1,colspan: 2 合并 1行2列 enen~~~~
简单的实例可以参考:https://blog.csdn.net/weixin_41472431/article/details/110935366
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)