Ant Design of Vue ui框架 表格合并数据展示

<template>
    <a-table :columns="testColumns" :data-source="testData"></a-table>
</template>


<script>
//hideTb 隐藏掉显示td
//childrenS 需要合并的子类，循环一遍摊开显示

const testData = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park1',
    childrenS: [
      {
        phone: 18889898989,
        address: 'New York No. 1 Lake Park2 里面',
      },
      {
        phone: 18889898989,
        address: 'New York No. 1 Lake Park3 里面',
      },
      {
        phone: 18889898989,
        address: 'New York No. 1 Lake Park 3 里面',
      },
    ],
  },
  {
    key: '12',
    name: 'John Brown2',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park2',
    childrenS: [],
    hideTb: 1,
  },
  {
    key: '13',
    name: 'John Brown3',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park3',
    childrenS: [],
    hideTb: 1,
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
    childrenS: [
      {
        phone: 18889898989,
        address: 'New York No. 1 Lake Park2 里面',
      },
      {
        phone: 18889898989,
        address: 'New York No. 1 Lake Park3 里面',
      },
      {
        phone: 18889898989,
        address: 'New York No. 1 Lake Park 3 里面',
      },
    ],
  },
  {
    key: '2-1',
    name: 'Joe Black2-1',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
    childrenS: [],
    hideTb: 1,
  },
  {
    key: '2-2',
    name: 'Jim Red 2-2',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
    childrenS: [],
    hideTb: 1,
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
    childrenS: [],
  },
  {
    key: '6',
    name: 'Jake White2',
    age: 13,
    tel: '0575-220989889',
    phone: 18900010006,
    address: 'Dublin No. 2 Lake Park22',
    childrenS: [],
  },
  {
    key: '7',
    name: 'Jake White2',
    age: 13,
    tel: '0575-220989889',
    phone: 18900010008,
    address: 'Dublin No. 2 Lake Park22',
    childrenS: [],
  },
  {
    key: '8',
    name: 'Jake White2',
    age: 13,
    tel: '0575-220989889',
    phone: 18900010009,
    address: 'Dublin No. 2 Lake Park22',
    childrenS: [],
  },
]
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  }
  console.log('row:', row)
  // if (row.childrenS.length > 1) {
  // obj.attrs.rowSpan = row.childrenS.length
  // }
  // if (index === 5) {
  //   // obj.attrs.colSpan = 0
  //   obj.attrs.rowSpan = 4
  // }
  // if (index === 6 || index === 7) {
  //   obj.attrs.colSpan = 0
  //   // obj.attrs.rowSpan = 4
  // }
  return obj
}
const testColumns = [
  {
    title: 'name',
    dataIndex: 'name',
    // customRender: renderContent,
  },
  {
    title: 'Age',
    dataIndex: 'age',

    // colSpan: 0,
    // customRender: renderContent,
  },

  {
    title: 'Phone',
    // colSpan: 0,
    dataIndex: 'phone',
    // customRender: renderContent,
    customRender: (text, row, index) => {
      const obj = {
        children: text,
        attrs: {},
      }
      if (row.childrenS.length > 0) {
        obj.children = row.childrenS[0].phone + '地址dianh测试'
        obj.attrs.rowSpan = row.childrenS.length
      }
      if (row.hideTb == 1) {
        obj.attrs.rowSpan = 0
      }
      return obj
    },
  },
  {
    title: 'Address',
    // colSpan: 0,
    dataIndex: 'address',
    customRender: (text, row, index) => {
      const obj = {
        children: text,
        attrs: {},
      }
      if (row.childrenS.length > 0) {
        obj.children = row.childrenS[0].address + '地址测试'
        obj.attrs.rowSpan = row.childrenS.length
      }
      if (row.hideTb == 1) {
        obj.attrs.rowSpan = 0
      }
      return obj
    },
    // customRender: renderContent,
  },
]

export default {
  data() {
    return {
      testData,
      testColumns,
   
    }
  },
}
</script>