<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>