话不多说先上效果图
实现是用的两层table嵌套
html结构
</a-button>
<a-table
:expandRowByClick='true'
:columns="columns"
:data-source="data"
class="components-table-demo-nested">
<!-- 编辑-->
<a slot="operation1" slot-scope="text,record" @click.stop='test'>编辑</a>
<!-- 是否选中 @click.stop是为了防止ant组件的事件冒泡 -->
<a slot="operation2" slot-scope="text,record" @click.stop>
<a-switch default-checked @change="onChange" :defaultChecked='false' />
</a>
<!-- 调试-->
<a slot="operation3" slot-scope="text,record">调试</a>
<!-- :showHeader='false'-->
<a-table
:showHeader='false'
slot="expandedRowRender"
slot-scope="scoped,record"
:data-source="scoped.list"
:columns="innerColumns"
:pagination="false"
>
<div slot="test" slot-scope="text,record">自定义</div>
</a-table>
</a-table>
图片这里这里我搞错了插槽那个是自定义数据栏(父子级都是自定义数据栏)
表头配置
columns:[
{ title: 'title', dataIndex: 'title', key: 'title' ,width:'70%'},
{ title: '编辑', key: 'operation1', scopedSlots: { customRender: 'operation1' } },
{ title: '是否开启', key: 'operation2', scopedSlots: { customRender: 'operation2' } },
{ title: '调试', key: 'operation3', scopedSlots: { customRender: 'operation3' }},
],
innerColumns :[
{ title: '原始数据',dataIndex: 'cailber', key: 'cailber', ellipsis: true },
{ title: '行为数据',dataIndex: 'type', key: 'type', ellipsis: true },
{ title: '自定义数据',dataIndex: 'test', key: 'test', scopedSlots: { customRender: 'test' } },
],
数据格式是
data = [
{ id: 0,
title: '损坏',
number: 10,
list: [
{ name: 1, type: '流量控制阀1', cailber: 100, desc: '备注' },
{ name: 2, type: '流量控制阀2', cailber: 102, desc: '备注' }
]
},
{ id: 1,
title: '常关',
number: 15,
list: [
{ name: 1, type: '蝶阀1', cailber: 15, desc: '备注' },
{ name: 2, type: '蝶阀2', cailber: 14, desc: '备注' }
]
}
]