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</a>
    <a-table
      slot="expandedRowRender"
      slot-scope="text"
      :columns="innerColumns"
      :data-source="innerData"
      :pagination="false"
    >
      <span slot="status" slot-scope="text"> <a-badge status="success" />Finished </span>
      <span slot="operation" slot-scope="text" class="table-operation">
        <a>Pause</a>
        <a>Stop</a>
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item>
              Action 1
            </a-menu-item>
            <a-menu-item>
              Action 2
            </a-menu-item>
          </a-menu>
          <a> More <a-icon type="down" /> </a>
        </a-dropdown>
      </span>
    </a-table>
  </a-table>
</template>
<script>
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
  { title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },
];

const data = [];
for (let i = 0; i < 3; ++i) {
  data.push({
    key: i,
    name: 'Screem',
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
  });
}

const innerColumns = [
  { title: 'Date', dataIndex: 'date', key: 'date' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },
  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  {
    title: 'Action',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

const innerData = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: '2014-12-24 23:12:00',
    name: 'This is production name',
    upgradeNum: 'Upgraded: 56',
  });
}

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

方法二

通过expandedRowRender这个插槽虽然实现了插入详情介绍，但是默认会渲染成children，如果我们原本数据就是树形数据的话，这样就会有冲突。如图

（ps：有哪位大佬可有解决这个冲突的方法可以评论下）。
我的解决方法是点击更多时，在每一行的子数据中的第一条数据插入一条新数据，然后进行列合并，这样就避免了详情行和子数据冲突问题。话不多说上主要代码。

             <a-table
              @expandedRowsChange="expandedRowsChange"
              @expand="expand"
              :expandedRowKeys="expandedRowKeys"
              :columns="jsoncolumns"
              :data-source="alldata.body_data.content.content"
              :bordered="true"
              :pagination="false"
              >
            </a-table>
// js代码
<script>
// columns一定要写到data中
     data () {
        return {
          jsoncolumns: [
        {
          title: '标签',
          dataIndex: 'name',
          width: '20%',
           customRender: (value, row, index) => {
             const newdata = row.key.split('-')
            if (newdata.pop() === 's') {
              return {
              children: <p style="margin: 0;width:100%;display: flex;justify-content: start;flex-wrap: wrap">
                <span style="width:25%;marginBottom:20px">最大长度：{value.more.maxlength}</span>
                <span style="width:25%;marginBottom:20px">最小长度：{value.more.minlength}</span>
                <span style="width:25%;marginBottom:20px">最大值: {value.more.maximum}</span>
                <span style="width:25%;marginBottom:20px">最小值: {value.more.minimum}</span>
                <span style="width:100%;marginBottom:20px">其他限制: {value.more.pattern}</span>
                <span style="width:100%;marginBottom:20px">参数可能性及说明：: {value.more.newenum}</span>
         </p>,
              attrs: {
                colSpan: 6
              }
            }
            }
               return value
          }
        },
        {
          title: '类型',
          key: 'type',
          dataIndex: 'type',
          width: '15%',
          customRender: (value, row, index) => {
            const obj = {
              children: <span>{ value === 'M' ? '必选' : value === 'C' ? '条件必选' : '可选' }</span>,
              attrs: {}
            }
            const newdata = row.key.split('-')
            if (newdata.pop() === 's') {
              obj.attrs.colSpan = 0
            }
            return obj
          }
        },
        {
          title: '必选M/条件必选C/可选O',
          key: 'required',
          dataIndex: 'required',
          width: '15%',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {}
            }
            const newdata = row.key.split('-')
            if (newdata.pop() === 's') {
              obj.attrs.colSpan = 0
            }
            return obj
          }
        },
        {
          title: '说明',
          dataIndex: 'description',
          key: 'description',
          width: '20%',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {}
            }
            const newdata = row.key.split('-')
            if (newdata.pop() === 's') {
              obj.attrs.colSpan = 0
            }
            return obj
          }
        },
         {
          title: '详细说明',
          dataIndex: 'detail',
          key: 'detail',
          width: '20%',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {}
            }
            const newdata = row.key.split('-')
            if (newdata.pop() === 's') {
              obj.attrs.colSpan = 0
            }
            return obj
          }
        },
         {
          title: '操作',
          dataIndex: 'action',
          width: '10%',
          customRender: (value, row, index) => {
              const obj = {
                children: <a>更多<a-icon type="down"/></a>,
                attrs: {}
              }
              const newdata = row.key.split('-')
            if (newdata.pop() === 's') {
                obj.attrs.colSpan = 0
              }
                return obj
            },
            customCell: this.more // 给本列添加点击事件
        }
          ],
         }
     }，
   methods： {
    more (val) {
        return {
          on: {
            click: (event) => {
             const newval = val.children.find((v, i) => {
             // 查找是否有展开行
                 return v.key.split('-').pop() === 's'
              })
              if (val.more) {
                 if (!newval) { // 判断本行的详情行是否展开
                   const newenum = {}
                   if (val.more.enum) {
                    val.more.enum.forEach((v, i) => {
                       newenum[v.value] = v.description
                   })
                  val.more.newenum = JSON.stringify(newenum)
                   }
                   // 如果本行没有展开在子数据首部插入详情行，key值为改行key值-s
                 val.children.unshift({ key: val.key + '-s', name: val })
              } else {
              //如果展开就删除第一个元素，关闭详情行
                val.children.shift()
              }
              }
            }
          }
        }
      },
   }
</script>
     

希望该文章可以帮助解决疑惑，有更好的方法或者有其他不了解的可以评论。
行列合并具体请看我下篇文章。