elementui table type="expand" 实现点击行展开行
<el-table fit border size="small" :data="deviceList" ref="dataTreeList" @expand-change="handleExpandChange"> <el-table-column type="expand"> // 如果表头需要统一管理按钮 可加入以下代码 <template slot="header" slot-scope="scope"> <el-button type="text" size="mini" @click="toggleRowExpansion">{{ isExpansion ? "关闭" : "展开" }</el-button> </template> <template slot-scope="scope">加入需要折叠的代码</template> </el-table-column> </el-table>
/** 表格展开与关闭 */ toggleRowExpansion(){ if(this.deviceList.length){ this.isExpansion = !this.isExpansion; this.toggleRowExpansionAll(this.deviceList, this.isExpansion); } }, toggleRowExpansionAll(data, isExpansion) { data.forEach((item) => { this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion); if (item.children !== undefined && item.children !== null) { this.toggleRowExpansionAll(item.children, isExpansion); } }); }, // 判断是否所有行都展开或者关闭 handleExpandChange(row,rows){ if(this.deviceList.length == rows.length){ this.isExpansion = true }else{ this.isExpansion = false } }
来源:https://www.jianshu.com/p/47064ff15219
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!