Ant Design Vue笔记——表格详情

1.表格中添加详情按钮

<template>
  <a-table
    ref="table"
    size="middle"
    bordered
    rowKey="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: '2022.02.21',
          username:'户户',
          status: '成功',
        },
      ]
    }
  }
}
</script>

2.点击表格详情的时候获取父组件中的数据

（1）引入公共组件

        通过接口调用数据时，添加loadData方法.

        点击详情按钮调用的方法是handleDetail,将数据获取到传给公共组件

<template>
  <a-card>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="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: '2022.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 = true
      this.$nextTick(()=>{
        this.$refs.record.show(data)
      })
    },

    add () {
      this.visible=true
      this.$nextTick(()=>{
        this.$refs.realForm.add();
      })
    },
    edit (record) {
      this.visible=true
      this.$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 = true
    this.source = param
    this.dataSource = [{}]
    let arr = new Array()
    for (const i in param){
      this.$set(this.dataSource[0], i,param[i])
    }
  }

}

        得到的数据格式如下：

         

         最终详情效果：