ant-design-vue 中 table插入详情行

ant-design-vue 中 table插入详情行

在业务中当表格内容较多不能一次性完全展示时。为了页面的美观，这时候就需要在本行插入一行详情行，如上图，点击更多插入详情介绍。实现方法主要有两种。

方法一

ant-design-vue原文档提供的expandedRowRender插槽。可以在每行后面插入子行，也可以插入子table。以下是部分代码，详情请点击查看原文档

<template>
  <a-table :columns="columns" :data-source="data">
    <a slot="action" slot-scope="text" href="javascript:;">Delete</a>
    <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
      {
  { record.description }}
    </p>
  </a-table>
</template>
<script>
const columns = [
  {
      title: 'Name', dataIndex: 'name', key: 'name' },
  {
      title: 'Age', dataIndex: 'age', key: 'age' },
  {
      title: 'Address', dataIndex: 'address', key: 'address' },
  {
      title: 'Action', dataIndex: '', key: 'x', scopedSlots: {
      customRender: 'action' } },
];

const data = [
  {
     
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
     
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
     
    key: 3,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
  },
];

export default {
     
  data() {
     
    return {
     
      data,
      columns,
    };
  },
};
</script>

嵌套子表格 详情请点击查看

<template>
  <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
    <a slot="operation" slot-scope="text">Publish