antd vue table 组件做最后一列固定 并合并合计列的操作

tips 最后一列的数据是通过合计出来的 然后再对table数据中再增加最一后一列
前面4项就是需要被合并的 所以不用添加值进去

1.实现最后一列固定,我们可以使用css样式使起固定在底部

/deep/.ant-table-row:last-child td {
        background: #fff;
        position: sticky;
        bottom: 0px;
        z-index: 1;
        box-shadow: 5px 0 10px #e4e4e4;
    }

2.合并列使用table自带的customRender方法

• 这里是指定在那一列需要合并,代码中的tabelDatasLength是博主数据的长度,判断的是最后一列的需要合并5列

customRender: (text, record, index) => {
   if (index < this.tabelDatasLength - 1) {
         return `${(this.pageNo - 1) * this.pageSize + index + 1}`
     }
     return {
         children: '合计',
         attrs: {
             colSpan: 5,
         },
     }
 }

3.注意,这个地方写了合并5列 会增加5个td出来,所以需要下面的步骤,每一列合并为0 直到5列合并完成

最后的效果

4.至于右侧操作列可以通过插槽中的index来判断是否渲染