关于antdesign-vue中表格customRender与scopedSlots共用问题的解决

关于antdesign-vue中表格customRender与scopedSlots共用问题的解决

第一次使用ant组件，感触很多，我们工作中我们使用的最多还是table，作为element的钉子户，ant把table分为了columns和data-source,看似灵活ant-table组件，其实配置项很复杂，语法也很复杂，今天就来说一说ant-table，我遇到的需求就是表格最下面出现统计需要合并单元格，先上图片

上面是ui图的效果，那我们最下面一行就需要合并单元格，来看代码：

//最后一行的第二个单元格开始合并，横向合并两个单元格，通过customRender
{
          title: 'xxxx',
          dataIndex: 'contractAmount',
          key: 'contractAmount',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {},
            };
            if (index == this.data.length - 1) {
              obj.attrs.colSpan = 2;
              obj.attrs.align = 'center';
            }
            return obj;
          },
        }

但是第一个问题出现了，合并完后表格会多出一格，效果如下：

这个时间我们需要，手动将被合并的单元格，手动配置将自身干掉，将colspan改为0

{
          title: '完成量(吨)',
          dataIndex: 'completedAmount',
          key: 'completedAmount',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {},
            };
            if (index == this.data.length - 1) {
              obj.attrs.colSpan = 0;//将colspan改为0
            }
            return obj;
          },
        },

这样我们的表格就正常，但是如果你合并的单元格有插槽的情况会有问题，我们继续来看

由于customRender会重构，这时我们的插槽是不生效的，这时我们需要用原生js活jq来解决这个问题，看代码：

{
          title: '履约详情',
          key: 'action',
          customRender: (text, record, index) => {
          //这里其实就是不用插槽，每一行手动创建一个元素并且用原生的方式绑定事件，再将record传出去，代替插槽的功能，这样就完成
            const child = this.$createElement('a', {
              domProps: {
                innerHTML: '查看详情',
              },
              on: {
                click: () => {
                  this.look(record);
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            if (index == this.data.length - 1) {
              obj.attrs.colSpan = 0;
            }
            return obj;
          },
        },

来看一眼最后的效果吧