<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
var spanArr = [];
var ageArr = [];
var position = 0;
var positionage = 0;
//列合并
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  const _row = spanArr[index];
  obj.attrs = {
    rowSpan: _row,
  };

  return obj;
};
const renderContentAge = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  const _row = ageArr[index];
  obj.attrs = {
    rowSpan: _row,
  };

  return obj;
};
const rowspan = (userData) => {
  spanArr = [];
  ageArr = [];
  position = 0;
  positionage = 0;
  userData.forEach((item, index) => {
    if (index === 0) {
      spanArr.push(1);
      ageArr.push(1);
      position = 0;
      positionage = 0;
    } else {
      //需要合并的地方判断
      if (userData[index].name === userData[index - 1].name) {
        spanArr[position] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        position = index;
      }
      if (userData[index].age === userData[index - 1].age) {
        ageArr[positionage] += 1;
        ageArr.push(0);
      } else {
        ageArr.push(1);
        positionage = index;
      }
    }
  });
  console.log(spanArr);
  console.log(ageArr);
};

const data = [
  {
    key: "1",
    name: "aa",
    age: 11,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "aaa",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 11,
    address: "London No. 1 Lake Park",
  },
  {
    key: "3",
    name: "aaa",
    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: renderContent,
      },
      {
        title: "Age",
        dataIndex: "age",
       customRender: renderContentAge,
      },
      {
        title: "Home phone",
        dataIndex: "tel",
      },
      {
        title: "Phone",
        dataIndex: "phone",
      },
      {
        title: "Address",
        dataIndex: "address",
      },
    ];
    return {
      data,
      columns,
    };
  },
  created() {
    rowspan(data);
  },
};
</script>