ant design vue中expandedRowRender

### Ant Design Vue 中 `expandedRowRender` 属性的使用

在 Ant Design Vue 的表格组件 (`Table`) 中，`expandedRowRender` 属性允许为每一行定义展开后的自定义渲染内容。这使得可以展示更多关于该行的信息而不必离开当前页面。

#### 基本用法

为了实现这一功能，在创建 `<a-table>` 标签时需指定 `:expanded-row-render="customExpand"` 方法来处理每行数据的具体显示逻辑[^1]：

<template>
  <a-table :columns="columns" :data-source="dataSource" :expanded-row-render="customExpand">
    <!-- 表格其他配置 -->
  </a-table>
</template>

<script>
export default {
  data() => ({
    columns: [
      { title: 'Name', dataIndex: 'name' },
      // 更多列...
    ],
    dataSource: []
  }),
  
  methods: {
    customExpand(record) {
      return (
        <div style={{ margin: 0 }}>
          {/* 自定义扩展行的内容 */}
          <p>Some details about record with name: {record.name}</p>
        </div>
      );
    }
  }
}
</script>

上述代码展示了如何通过 JSX 或者模板字符串的方式返回 HTML 片段作为额外信息区域内的具体内容[^2]。

对于更复杂的场景，比如想要控制哪些行默认处于展开状态或是监听折叠变化事件，则可以通过设置 `expandIcon` 和 `onExpand` 等参数进一步定制化行为[^3]。