vue elementui table表格动态合并单元格
程序员文章站
2022-03-04 11:51:50
...
getTableList(){
//获取表格数据方法在此方法返回成功数据是调用
this.rowspan();
},
rowspan() {
debugger;
var that = this;
that.spanArr = [];
that.JRLTableData.forEach((item,index) => {
debugger;
if( index === 0){
that.spanArr.push(1);
that.position = 0;
}else{
if(that.JRLTableData[index].stoveId === that.JRLTableData[index-1].stoveId ){
that.spanArr[that.position] += 1;
that.spanArr.push(0);
}else{
that.spanArr.push(1);
that.position = index;
}
}
})
},
//在el-table中调用
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//表格合并行
debugger;
//笨方法要合并几列就写几个
if(columnIndex === 0){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if(columnIndex === 1){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if(columnIndex === 2){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if(columnIndex === 3){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if(columnIndex === 4){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
上一篇: ElementUI表格点击单元格编辑
下一篇: 选中对象【WPF】自定义控件之依赖属性
推荐阅读
-
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
-
vue elementUI table表格数据 滚动懒加载的实现方法
-
element-ui中Table表格省市区合并单元格的方法实现
-
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
-
对Vue table 动态表格td可编辑的方法详解
-
Vue+elementui 实现复杂表头和动态增加列的二维表格
-
Vue+ElementUI table实现表格分页
-
vue 中 elment-ui table合并上下两行相同数据单元格