el-table树形数据点击行展开

最新推荐文章于 2025-01-02 16:42:02 发布
最新推荐文章于 2025-01-02 16:42:02 发布
阅读量1k 收藏 7
点赞数 8
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wwngxu/article/details/135604028
版权
本文介绍了如何在Vue项目中使用ElementUI的el-table组件处理树形数据，重点讲解了如何通过`row-click`事件处理程序展开指定行，特别是针对所属单位列的展开操作。

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

el-table树形数据点击行展开

在模板中加入
@row-click=“rowClick”

// 模板
<el-table 
  	  row-key="planId" 
	  ref="table" 
	  :data="tableData" 
	  lazy
	  :load="load"
	  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	  @row-click="rowClick"
	  @selection-change="selectionChange" 
	>
	<el-table-column type="selection" align="center" />
    <el-table-column label="检查明细" prop="inspectDetails" />
</table>

// 点击第一列展开（防止行后有按钮，点击按钮造成展开）
rowClick(row, column, e) {
	if (column?.label == '所属单位') {
		if (e.currentTarget.querySelector(".el-table__expand-icon")) {
			e.currentTarget.querySelector(".el-table__expand-icon").click();
		}
	}
},
青云ovo
关注
Element-ui中el-table展开行
m0_51431448的博客
05-17 8766
展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key
vue element-plus el-table树形数据同级拖拽
l5y2t0的博客
11-14 456
【代码】vue element-plus el-table树形数据同级拖拽。
el-table实现展开当前行时收起上一行的功能
maohangfei.cn
11-12 1797
【代码】el-table实现展开当前行时收起上一行的功能,并且再次点击展开的当前行则收起当前行
element table 树形数据 点击某一个行展开数据 el-table tree
qq_485114707的博客
09-06 1914
步骤一： 增加这个行点击事件。步骤二： methods插入以下函数 其中判断条件可以自己定义 我是只要不是操作格子 这一行都可以加载。目前table tree 是点击这个icon才能下拉加载。需求 点击行就能加载下拉。
el-table 树状表格展开及折叠
sinat_34896766的博客
07-03 1460
【代码】el-table 树状表格展开及折叠。
el-table 点击行-显示当前展开行
qq_44109588的博客
03-06 1208
【代码】el-table 点击行-显示当前展开行。
element table 通过点击行 开关展开行
狗狗狗亮的博客
03-31 1776
还有一点就是，当 table的内容只有一行，并且这一行的开展内容过多而并且超出的table高度的，这个时候table不会自适应出现滚动条，但在第二次点击的时候会自适应出现滚动条。我这里是在请求事件里面将table的高度 减少1px ，就可以在第一次的时候自适应。展现的效果是手风琴模式的，通过点击行内容，控制行的展开与关闭。但需要注意的是，在搜索新的数据，或者翻页的时候，要记得把 expands 数据清空，不然会出现样式错误。现需要点击行就可以展开和关闭。本项目里，由于展开行里的内容，是另一请求返回的内容。
el-table 树形表格 自定义展开图标_实践一个树形组件
weixin_39916355的博客
10-22 2368
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有，但不知道为什么设计得发虚，就是各元素之间没有严格衔接上，见下图，而Vue生态圈中的Element UI和iView压根都不支持)。对我这种没有钛合金狗眼的人来说常常会看歪了。所以自己想禽兽，啊不，亲手尝试一个。仅仅实践最最基本的树形结构的展现、展开、折叠，不包含高级的多选、拖动、自定义渲染等功能。弄完...
解决el-table树形数据量过大，导致卡顿问题
IT_dabai的博客
06-30 6616
element-ui里面的树状表格，当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。这种处理方式会在展开过多时慢慢变得卡顿，所以需要提供一个逻辑，使得用户可以一键回到第一层，且卸载所有子节点。我以为是源码里的逻辑不好，debug源码，但是没有发现原因，后求助同事，得出是dom元素过多导致的。在点击展开的时候，改变display样式，因为元素位置变化，页面发生回流，且元素多，所以开销大。一次性加载所有数据的时候，折叠的元素都已经加载了，只是样式为dispaly：none；
html table 下一级节点,el-table 树形表格 点击子节点输出该子节点的父节点数据
weixin_39615402的博客
06-09 1627
el-table 树形表格 点击子节点输出该子节点的父节点数据el-table 树形表格 点击子节点输出该子节点的父节点数据如图，点击1输出2的数据。代码如下：rowClick(row, column, event) {//遍历整个table数据this.tableData.forEach((item) => {//判断该行是否有子节点if ("children" in item) {//遍...
el-table 树形数据的过滤
qq_52209816的博客
01-22 850
/ 如果节点是数组，则对每个元素应用过滤逻辑。// 检查当前节点的值是否包含任何过滤值。filterValues是一个数组，包含过滤的要素。树形数据的过滤：返回包含所需的要素以及其父节点。这里可以根据你需要的条件进行修改。
element Table 展开行功能 (设置点击行可展开功能)
热门推荐
冰雪为融的博客
01-03 3万+
element Table 展开行功能 官方使用： 通过设置 type="expand" 和Scoped slot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scoped slot相同。 但这种设置，只是点击箭头可展开 ，点击整行是不能展开的 但想要提升用户体验，最好的是点击行可展开，所以，本人研...
vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & default-expand-all之默认展开所有行
weixin_44867717的博客
05-15 920
【代码】vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & default-expand-all之默认展开所有行。
el-table树形懒加载展开改为点击行展开
最新发布
梦雨的博客
01-02 399
el-table树形懒加载展开改为点击行展开
eltable树形结构搜索后展开
weixin_46369590的博客
02-02 939
先说一下我这个功能的需求，页面使用el-table展示的树形结构，默认是不展开的。在搜索后，展开搜索到的节点。
el-table懒加载树形数据，实现整行点击的展开
sanlingwu的博客
08-16 2994
做项目遇到一个需求，根据集团层级展现一组数据，每个层级都可以点开看更详细的拆分数据，第一想法是用el-table的树形数据来展示，大概下面这个样子： 用过这个组件的应该知道这个只能通过点击每一行前面的小箭头实现伸缩，箭头有点小，而且表格一行的数据很长时，对用户的操作不是很友好，所以想能够点击一行的任意位置都可以进行伸缩。 1、官网中的toggleRowExpansion方法如下： <el-table :data="tableData" ref="refTable"
el-table表格的展开行，初始化的时候展开哪一行+设置点击行可展开功能
KMINLIKE的博客
09-14 1147
el-table展开行只是点击箭头展开，点击行没反应，这里做优化点击行也可以进行展开。的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的。需要默认展开行只需要在expands存入需要展开行的id就可以了。可以开启展开行功能，
饿了么ui组件table点击tr展开单行
浮云神马-潘
08-01 1591
首先官方给出的案例： <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-form l...
el-table表格中第一列合并和第二列expand展开行同时使用的解决办法
weixin_70486077的博客
05-15 1196
但是展开后，在原来的循环打印的索引基础上又多了五次记录，但是我的表格展开并没有改变原本el-table绑定的data数据，有点搞不懂这个合并表格的循环逻辑，看了一下expand展开是在展开行后面同级下面添加了一个行元素，没有过多的去深究，下面贴上解决办法。在我使用el-table的时候，遇到了一个问题，就是el-table的合并和展开似乎不能同时使用，会出现一些奇奇怪怪的bug导致不能正常显示。
el-table 树形数据勾选
12-27
### el-table 树形数据勾选实现方式 对于 `el-table` 的树形数据显示与勾选功能，Element Plus 提供了一套完整的解决方案来处理复杂的数据结构。为了使表格能够展示并操作树状层次关系的数据，需设置特定属性。 #### 属性配置 - **row-key**: 设置每一行唯一标识符字段名，用于识别节点间的父子关系[^1]。 - **tree-props**: 定义子级 children 字段名称，默认为 "children"。 - **default-expand-all**: 是否默认展开所有行，适用于初次加载时全部显示细节信息。 - **show-checkbox**: 显示多选框列，允许用户选择多个条目。 当涉及到树形数据的选择逻辑时，还需要考虑父节点与其子节点之间的联动效果： - 如果希望父节点被选中则自动全选其下所有的子孙节点，则可以监听 `selection-change` 事件，在回调函数内遍历当前选中的项，并手动调用 `toggleRowSelection(row, selected)` 来控制关联节点的状态变化。 下面是一个简单的例子展示了如何创建带有复选框的可扩展树表单： ```html <template> <div> <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all show-checkbox @selection-change="handleSelectionChange"> <!-- 列定义 --> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> ... </el-table> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const tableData = [ { id: 1, name: 'Parent Node', children: [{ id: 2, name: 'Child Node' }] } ]; function handleSelectionChange(selection) { console.log('Selected:', selection); } </script> ``` 此代码片段实现了基本的功能需求，即通过指定 `row-key`, `tree-props` 及其他必要参数让 `el-table` 支持树型结构的同时提供复选项让用户可以选择任意数量的记录；并通过自定义的方法响应用户的交互行为，如点击某一行前面的小方块触发整个分支或者仅该叶子结点的选取状态改变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值