elementUI table type="expand"打开时触发事件

最新推荐文章于 2025-06-05 15:46:28 发布

月半子庆

最新推荐文章于 2025-06-05 15:46:28 发布

阅读量1.7w

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_39040192/article/details/93636992

前端笔记专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在ElementUI的table组件中使用expand-change事件，通过一个具体的示例，展示了如何在展开行时触发异步请求，获取并处理数据。这为开发者提供了在表格展开行时动态加载额外信息的有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementUI table type="expand"打开时触发事件

- - - expand-change（row, (expandedRows | expanded)）

expand-change（row, (expandedRows | expanded)）

需求，在table type="expand"打开时执行一个请求，并处理逻辑，在官网中发现一个方法可以实现

HTML

<el-table
    style="width:100%;margin-bottom: 15px;"
    :data="Tabledata.filter(data => !search || data.fault_hop.toLowerCase().includes(search.toLowerCase())||data.network_level.toLowerCase().includes(search.toLowerCase())||data.fault_county.toLowerCase().includes(search.toLowerCase())||data.start_time.toLowerCase().includes(search.toLowerCase()))"
    :row-class-name="tableRowClassName"
    @selection-change="handleSelectionChange"
    @expand-change="zydescription"
>

methods

methods:{
	 async zydescription(data){
        let params = new URLSearchParams();
        params.append('city',data.fault_county);
        params.append('level',data.network_level);
        let obj = await initAxios(params);
	}
}