element table表格合并行和列
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
element-ui 官网案例: table合并行或列

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 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全都设为0
return {
rowspan: 0,
colspan: 0
}
}
}
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
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 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)