聚诚网站建设,重庆营销网站建设公司排名,有什么做图片赚钱的网站,四川省住房和城镇建设官方网站elementUI 表格中如何合并动态数据的单元格
ui中提供的案例是固定写法无法满足 实际开发需求
下面进行改造如下 准备数据如下
//在表格中 设置单元格的方法 :span-methodspanMethodFun
el-table :datatableData border :span-methodspa…elementUI 表格中如何合并动态数据的单元格
ui中提供的案例是固定写法无法满足 实际开发需求
下面进行改造如下 准备数据如下
//在表格中 设置单元格的方法 :span-methodspanMethodFun
el-table :datatableData border :span-methodspanMethodFun
//...
/el-table//表格数据 这里的数据是动态获取的
let tableData ref([{no:1,id:1},{no:1,id:1},{no:1,id:1},{no:1,id:2}])
//定义数组 用来临时存储 需要合并的列数 和行数
let spanArr:any []
//下标 用来设置临时存储数据的
let pos:any 0
//获取 需要合并数据的 方法
function getSpaArr(){
//循环表格数据for(let i0;itableData.value.length;i){if(i 0){//如何是第一个数据 表示只有一个相同的数据索引设置为0spanArr.push(1)pos 0}else{if(tableData.value[i].id tableData.value[i - 1].id){ //这里用id判断的 也可以用相同的名字 或者其他都可以判断值// 如果数据相同 第一列加1 其他 设置为0spanArr[pos] 1spanArr.push(0)}else{// 不相同 重新开始判断spanArr.push(1)pos i}}}
}
//调用方法 获取临时合并数据
getSpaArr()
//查看临时合并的数据
console.log(spanArr,spanArr);// 得到数据如下[3, 0, 0, 1] spanArr//这里调用合并单元格事件 row当前行的值,column当前列的值,rowIndex行的下标,columnIndex列的下标
const spanMethodFun ({ row, column, rowIndex, columnIndex, }: any) {// console.log(row,column,rowIndex,columnIndex);//如何临时合并数据存在执行if(spanArr.length 0){//这里设置第几行需要合并数据if (columnIndex 1 || columnIndex 6) {//第几列数据return { rowspan: spanArr[rowIndex], //需要合并的行数 通过行下表 获取临时存储值colspan: spanArr[rowIndex]0?1:0, //需要合并的列数 0代表不合并 1 合并成一列}}}
}效果如下 第2行 和最后一行进行了合并 其他没有合并
