antd vue 里面的table表格有合并行的功能模板，但是这个合并后的模板可能在实际中不太适合当前项目的使用情况，例如想在合并的行或者列中添加跳转功能等等

官网上面的代码部分只能实现简单的合并，那么如何在官网提供的customRender上面实现自己的需求呢，先看官网代码部分

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template slot="name" slot-scope="text">
      <a>{{ text }}</a>
    </template>
  </a-table>
</template>
<script>
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 4) {
    obj.attrs.colSpan = 0;
  }
  return obj;
};

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];

export default {
  data() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        customRender: (text, row, index) => {
          if (index < 4) {
            return <a href="javascript:;">{text}</a>;
          }
          return {
            children: <a href="javascript:;">{text}</a>,
            attrs: {
              colSpan: 5,
            },
          };
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
        customRender: renderContent,
      },
      {
        title: 'Home phone',
        colSpan: 2,
        dataIndex: 'tel',
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          if (index === 2) {
            obj.attrs.rowSpan = 2;
          }
          // These two are merged into above cell
          if (index === 3) {
            obj.attrs.rowSpan = 0;
          }
          if (index === 4) {
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: 'Phone',
        colSpan: 0,
        dataIndex: 'phone',
        customRender: renderContent,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        customRender: renderContent,
      },
    ];
    return {
      data,
      columns,
    };
  },
};
</script>

官网中的是基于index来实现的合并，这里如果简单的展示功能完全可用，但是如果需要在里面的某行添加其他功能的时候，customRender函数就不太可以实现了，当然也可能是我研究的不够透彻。所以我开始看api文档，发现了customCell这个函数，用来在合并行的时候对当前行进行另外的处理，下面放代码部分

// js部分代码
{
    title: '排名',
    dataIndex: 'index',
    customRender: (text, row) => {
      if (row.rank != -1) {
        return text;
      }
      return {
        children: <p class="center">用户不存在！</p>,
        attrs: {
          colSpan: 4
        },
      };
    },
},
{
    title: '用户ID',
    key: 'uid',
    customCell: (row) => {
      const obj = {
        style: {},
        attrs: {
            // rowSpan: 1
        }
      }
      if (row.rank != -1) {
        return obj;
      } else {
        obj.style.display = 'none'
        return obj
      }
    },
    scopedSlots: { customRender: 'uid' }
},

// vue html部分代码
<template slot="uid" slot-scope="text">
  <span class="under_line" @click="openUserInfo(text.uid)">{{ text.uid }}</span>
</template>

这部分代码有合并行的功能，也有在不满足条件的情况下对渲染出来的DOM部分进行其他的操作