使用vue+elementui展示 合并行
- 效果图
文章图片
表格渲染
:span-method="objectSpanMethod" 是合并行或列的计算方法，写在el-table标签上
monSpanArr(){
var that = this;
var arr = new Array();
if (this.data) {
this.data.forEach((item, index) => {
if (index == 0) { //因为是第一条数据，无论怎样最少会占一行，所以先给数组arr[0] = 1
arr.push(1);
that.position = 0;
//position作为数组下标
} else {
if (this.data[index].lksName == this.data[index - 1].lksName) { //如果判断数据相同
arr[that.position] += 1;
//数组和上一条相同的数据+1 ，比如arr[0] +=1
arr.push(0);
//当前条数下标的数组push 0 进去，在效果图上就展现出合并状态，不再单独占一行，比如arr[1] = 0
} else { //如果判断数据不相同
arr.push(1);
//数组push 1 进去，在效果图上就展现单独占一行的状态
that.position = index;
//更新下标
}
}
});
this.monSpanArrs = arr //this.monSpanArrs在objectSpanMethod中使用
}
}, objectSpanMethod({ row, column, rowIndex, columnIndex }){//行，列，行号，列号
if (columnIndex === 0) {//判断第一列，此处是湖泊名称
const _row = this.monSpanArrs[rowIndex];
//this.monSpanArr[行号作为下标]，拿到当前行号需要合并的行数
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,//返回合并的行数
colspan: _col
};
}
},推荐阅读
- vite创建vue3+ts+ant design vue项目
- #|VUE_数据修改后调用 this.$nextTick
- Vue|黑马头条移动项目(十)（登录页面的布局）
- vuex|vue3中使用vuex4
- elementUI|vue之页面局部组件刷新
- Vue|Vue实现页面的局部刷新
- vue|vue初学（axios获取api的数据）
- VUE|基于Vant组件的Vue移动端黑马头条项目Day01 处理rem适配 字体图标 封装axios
- vue|一个基于vue3+vite+ts的完整项目