vxe-table展开行

vxe-table是一个基于Vue.js的表格组件库，它提供了丰富的功能和灵活的配置选项。展开行是vxe-table中的一个特性，它允许用户在表格中展开一行，显示该行的详细信息或子表格。

要使用展开行功能，首先需要在表格组件中设置`expand-config`属性。该属性可以配置展开行的相关选项，例如展开行的字段名、展开行的渲染方法等。

展开行的字段名可以通过设置`expand-config`的`expandRowKeys`属性来指定。该属性接受一个数组，数组中的每个元素代表一个展开行的字段名。当用户点击展开按钮时，对应字段名的值会被提取出来，并传递给展开行的渲染方法。

展开行的渲染方法可以通过设置`expand-config`的`renderExpandContent`属性来指定。该属性接受一个函数，函数的参数包括当前行数据和当前行索引。在该函数中，你可以根据需要自定义展开行的内容，例如显示详细信息、嵌套子表格等。

以下是一个示例代码，演示了如何在vxe-table中使用展开行功能：

<template>
  <vxe-table
    :data="tableData"
    :expand-config="expandConfig"
  >
    <vxe-table-column type="expand"></vxe-table-column>
    <vxe-table-column field="name" title="姓名"></vxe-table-column>
    <vxe-table-column field="age" title="年龄"></vxe-table-column>
    <vxe-table-column field="gender" title="性别"></vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男', detail: '张三的详细信息' },
        { name: '李四', age: 25, gender: '女', detail: '李四的详细信息' },
        { name: '王五', age: 30, gender: '男', detail: '王五的详细信息' }
      ],
      expandConfig: {
        expandRowKeys: ['detail'],
        renderExpandContent({ row }) {
          return `<div>${row.detail}</div>`;
        }
      }
    };
  }
};
</script>

在上述示例中，`tableData`是表格的数据源，每一行数据都包含了一个`detail`字段，用于存储展开行的内容。`expandConfig`配置了展开行的字段名为`detail`，并通过`renderExpandContent`方法自定义了展开行的渲染内容。