1.表格中添加详情按钮
<template><a-tableref="table"size="middle"borderedrowKey="filename":scroll="{x:true}":columns="columns":dataSource="dataSource"><span slot="action" slot-scope="text, record"><a @click="handleDetail(record)"> 详情 </a></span></a-table></template><script>export default {name: 'dataRecord',data() {return {/* 表头 */columns: [{title: '序号',dataIndex: '',key: 'rowIndex',width: 60,align: 'center',customRender: function(t, r, index) {return parseInt(index) + 1}},{title: '文件名称',dataIndex: 'filename',align: 'center'},{title: '时间',dataIndex: 'time',align: 'center'},{title: '用户',dataIndex: 'username',align: 'center'},{title: '状态',dataIndex: 'status',align: 'center'},{title: '结果',dataIndex: 'action',scopedSlots: { customRender: 'action' },align: 'center'}],dataSource: [{key: '1',filename: '胡彦斌.jpg',time: '.02.21',username:'户户',status: '成功',},]}}}</script>
2.点击表格详情的时候获取父组件中的数据
（1）引入公共组件
通过接口调用数据时，添加loadData方法.
点击详情按钮调用的方法是handleDetail,将数据获取到传给公共组件
<template><a-card><a-tableref="table"size="middle"borderedrowKey="filename":scroll="{x:true}":columns="columns":dataSource="dataSource"><span slot="action" slot-scope="text, record"><a @click="handleDetail(record)"> 详情 </a></span></a-table><public-component-modules ref="modalForm"></public-component-modules></a-card></template><script>import { getAction } from '@api/manage'import publicComponentModules from '@views/EcomLink/modules/publicComponentModules'export default {name: 'dataRecord',components:{publicComponentModules},data() {return {/* 表头 */columns: [{title: '序号',dataIndex: '',key: 'rowIndex',width: 60,align: 'center',customRender: function(t, r, index) {return parseInt(index) + 1}},{title: '文件名称',dataIndex: 'filename',align: 'center'},{title: '时间',dataIndex: 'time',align: 'center'},{title: '用户',dataIndex: 'username',align: 'center'},{title: '状态',dataIndex: 'status',align: 'center'},{title: '结果',dataIndex: 'action',scopedSlots: { customRender: 'action' },align: 'center'}],dataSource: [{key: '1',filename: '胡彦斌.jpg',time: '.02.21',username:'户户',status: '成功',},],}},methods: {loadData() {getAction(this.url.list).then((res) => {if (res.success) {this.dataSource = res.result;}})},// 表格详情 弹窗handleDetail:function(record){this.$refs.modalForm.title="详情";this.$refs.modalForm.record(record)},}}</script>
（2）公共组件引入子组件
<template><j-modal:title="title":width="width":visible="visible"switchFullscreen@ok="handleOk":okButtonProps="{ class:{'jee-hidden': disableSubmit} }"@cancel="handleCancel"cancelText="关闭"><!-- 详情 --><data-record-detail ref="record" @ok="submitCallback" :disabled="disableSubmit"></data-record-detail></j-modal></template><script>import dataRecordDetail from '@views/dataRecord/dataRecordDetail'export default {name: 'publicComponentModules',components:{dataRecordDetail},data () {return {title:'',width:1400,visible: false,disableSubmit: false}},methods: {//详情record(data){this.visible = truethis.$nextTick(()=>{this.$refs.record.show(data)})},add () {this.visible=truethis.$nextTick(()=>{this.$refs.realForm.add();})},edit (record) {this.visible=truethis.$nextTick(()=>{this.$refs.realForm.edit(record);})},close () {this.$emit('close');this.visible = false;},handleOk () {this.$refs.realForm.submitForm();},submitCallback(){this.$emit('ok');this.visible = false;},handleCancel () {this.close()}}}</script>
（3）子组件中将获取的数据转换为数组
子组件获取到的数据为对象格式
根据数据显示需求，此时我们需要将对象改为数组
在子组件代码中：
methods: {show(param) {this.visible = truethis.source = paramthis.dataSource = [{}]let arr = new Array()for (const i in param){this.$set(this.dataSource[0], i,param[i])}}
}
得到的数据格式如下：
最终详情效果：
