美文网首页
vue3使用antdVue 3.x版本使用table组件合并相同

vue3使用antdVue 3.x版本使用table组件合并相同

作者: 焚心123 | 来源:发表于2023-12-07 15:48 被阅读0次
  • 目前支持的api是customCell有个render的那个api是不支持的
  • 大致的说下思路:由于customCell这个函数中会循环每个列,如:一行3列,有2行,那就是6遍,你要是在这个函数中每个下标进行判断就想官网的案例一样,那么是没有问题的,但是你要动态的在这个函数中写逻辑的话,会有问题,所以这个方案直接放弃,那么我们在每条数据中加一个rowSpan属性,直接通过index进行获取不就可以了吗
  • 怎么让每条数据加一个rowSpan属性,相同的数据第一条数量++,后面相同的数量为0呢,看代码
               let count = 0;
                while (count < res.data.vos.length) {
                    let item = res.data.vos[count];
                    if (!item.rowSpan) {
                        item.rowSpan = 1;
                    }
                    let indexCount = count + 1;
                    //主要看这里,将你要合并的条件变下即可rishType1
                    while (indexCount < res.data.vos.length && item.riskType1 === res.data.vos[indexCount]?.riskType1) {
                        item.rowSpan++;
                        res.data.vos[indexCount].rowSpan = 0;
                        indexCount++;
                    }
                    count = indexCount;
                }
                  data.tableHeader2  = res.data.vos
                 data.columns2[0].customCell = (record, rowIndex, column) => {
                    return {
                        rowSpan: data.tableHeader2[rowIndex].rowSpan,//这样就OK啦
                    };
                };
  • 在弹框中使用from表单的校验,再次点击弹框,之前的校验失败还在,可以使用弹框的属性,每次关闭销毁数据,或者调用from中的clearValidate清空校验的方法,不能调用重置方法(因为当前数据回显会重置为上次的数据),不过这个方法要加一个nextTick
  • 希望可以帮助到你

相关文章

网友评论

      本文标题:vue3使用antdVue 3.x版本使用table组件合并相同

      本文链接:https://www.haomeiwen.com/subject/nlgsgdtx.html