vue+antd+table一格加多行

Vue antd table 是一种非常方便的数据表格组件，可以用来展示和管理大量的数据信息。在使用中，我们有时候需要在某个单元格里面嵌套一个表格，用来展示更详细的数据信息。这种场景下，我们需要实现vue antd table一格加多行的效果。

实现这个效果的方法有多种，这里介绍一种比较简单的方式：

1. 首先，在vue antd table中找到需要嵌套的单元格，给它加上一个 slot 插槽。例如：

<a-table-column title="姓名">
    <template slot-scope="text, record">
        <span>{{ record.name }}</span>
        <div slot="expandedRowRender">
            <p>更详细的信息。。。</p>
            <p>更详细的信息。。。</p>
            <p>更详细的信息。。。</p>
        </div>
    </template>
</a-table-column>

这里要注意，设置 slot 的名称为 expandedRowRender，这样才可以使多行数据展开在同一个单元格内。

2. 接着，在 a-table 中添加一个属性，用来指定当前表格是否支持展开行：expandedRowRender。例如：

<a-table :columns="columns" :data-source="data" :pagination="false" :expanded-row-render="true"></a-table>

这里要注意，设置 expanded-row-render 的值为 true，表示允许展开行。当然，还可以给 expanded-row-render 设置具体的属性值，比如属性值为 object 表示可以通过对象来配置展开的行。

3. 最后，在 table 中添加一个事件监听函数，用来处理展开行功能的具体逻辑。例如：

<a-table :columns="columns" :data-source="data" :pagination="false" :expanded-row-render="true" @expandedRowsChange="onExpandedRowsChange"></a-table>

在 onExpandedRowsChange 函数中，我们可以进行一些表格展开和关闭的操作，例如：

methods: {
    onExpandedRowsChange(rows) {
        if (rows.length == 0) {
            // 关闭所有行
            return;
        }
        console.log('展开行：', rows[0]);
    }
}

需要注意的是，由于 expandedRowRender 的值为 true，表示允许展开行，所以属性 @expandedRowsChange 才会生效，才能实现展开行的效果。

通过以上三个步骤，我们就可以实现vue antd table一格加多行的效果了。当然，具体实现方式还要根据自己的实际情况来进行调整，如果你还有其他更好的实现方式，欢迎在评论中分享给大家。