关于type=“expand“使得内嵌表格混乱问题

本文介绍在使用Element UI的<el-table>组件时,如何正确实现表格的展开行功能。当使用<el-table-column type=expand>时,若表格显示异常,可通过将<el-table>包裹在<div>中解决。文章提供了一个关于内嵌表格正确显示的解决方案。
部署运行你感兴趣的模型镜像

<el-table>里加入

<el-table-column type="expand">
                      <template slot-scope="props">

后并没有显示下拉按钮,而是把内嵌表格全部放在了那一小列中。
后来发现,将<el-table><div>框起来就可以使得表格正常显示,可以正常下拉。

内嵌表格:
https://blog.youkuaiyun.com/qq_41305342/article/details/98970170

您可能感兴趣的与本文相关的镜像

Dify

Dify

AI应用
Agent编排

Dify 是一款开源的大语言模型(LLM)应用开发平台,它结合了 后端即服务(Backend as a Service) 和LLMOps 的理念,让开发者能快速、高效地构建和部署生产级的生成式AI应用。 它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈,并且提供了易用的界面和API,让技术和非技术人员都能参与到AI应用的开发过程中

在 `type=expand` 且修改下拉内容的情况下,要防止表格收缩,可从以下几个方面着手。 ### 数据绑定与更新 确保修改下拉内容后,表格数据能正确更新且绑定到表格上。若数据更新不及时,可能会触发表格的重新渲染,从而导致表格收缩。例如,在 Vue 中使用 `ref` 来操作表格,保证数据修改后能正确通知表格更新。 ```vue <template> <el-table :data="tableData" style="width: 100%" @cell-click="clickTable" ref="refTable" @selection-change="handleSelectionChange" @expand-change="expandSelect" > <el-table-column type="expand" width="0px" label="扩展"></el-table-column> </el-table> </template> <script> import { ref } from 'vue'; export default { setup() { const refTable = ref(null); const tableData = ref([ { id: 1, name: 'aaa', expandMsg: '我是展开内容' }, { id: 2, name: 'bbb', expandMsg: '我是展开内容bbb' } ]); const clickTable = (row) => { // 修改下拉内容 row.expandMsg = '修改后的展开内容'; // 确保表格更新 refTable.value.doLayout(); }; return { refTable, tableData, clickTable }; } }; </script> ``` ### 控制展开状态 使用 `toggleRowExpansion` 方法来控制表格的展开状态,在修改下拉内容后,手动调用该方法确保行保持展开。 ```javascript const expands = ref([]); const handleRowClick = (row) => { if (expands.value.includes(row.id)) { expands.value = expands.value.filter((val) => val !== row.id); } else { expands.value = []; // 添加该代码实现手风琴模式,删除该代码取消手风琴模式 expands.value.push(row.id); } // 修改下拉内容 row.expandMsg = '修改后的展开内容'; // 确保行保持展开 refTable.value.toggleRowExpansion(row, true); }; ``` ### 避免不必要的重新渲染 检查代码中是否存在不必要的重新渲染操作,例如在修改下拉内容时,避免触发整个表格的重新渲染。尽量只更新需要修改的部分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值