el-table树类型数据,实现点击某行切换其展开状态

主要是使用Table Eventsrow-click事件和Table MethodstoggleRowExpansion方法

<el-table
      v-loading="loading"
      :data="menuList"
      row-key="menuId"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      ref="menuTable"
      row-click="handleRowClick"
    >
/** 表格某行点击事件 */
    handleRowClick(row, column, event){
      // 判断当前行是否有子集,若没有则结束处理
      if(row.children || row.children.length === 0) return ;
      this.$refs.menuTable.toggleRowExpansion(row);
    }

 引发问题:

如果表格行里有点击事件,则会造成单击行row-click事件与行中操作按钮的单击事件发生冲突,当点击行里的修改时会切换当前行的展开状态,解决是:将修改按钮的@click改为@click.native.stop,给组件绑定原生事件,阻止单击事件冒泡。

<el-button size="mini" 
   type="text" 
   icon="el-icon-edit" 
   @click.native.stop="handleUpdate(scope.row)"
   v-hasPermi="['system:menu:edit']"
  >修改</el-button>

 

 

### 实现 `el-table` 组件中形结构懒加载并展开下一级节 为了实现Vue3 和 Element Plus 中使用 `el-table` 的形表格懒加载功能,并通过点击按钮来控制特定节的子项展开,可以按照如下方式进行设置: #### 1. 安装依赖库 确保安装了最新版本的 Vue CLI 及 Element Plus。 ```bash npm install @element-plus/icons-vue@latest ``` #### 2. 创建 TreeTable.vue 文件 创建一个新的组件文件用于展示带有懒加载特性的状表单。此部分代码展示了如何配置基础属性以及监听事件处理函数[^1]。 ```vue <template> <div class="tree-table"> <button @click="toggleExpandAll">Toggle Expand All</button> <el-table :data="tableData" row-key="id" lazy :load="load" border style="width: 100%"> <!-- 表格列定义 --> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="size" label="Size"></el-table-column> <el-table-column prop="type" label="Type"></el-table-column> </el-table> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; let tableData = ref([ { id: 1, name: "Folder A", size: "-", type: "folder", hasChildren: true, // 子节标记 }, ]); // 加载子节数据方法 const load = async (row, treeNode, resolve) => { setTimeout(() => { const data = [ { id: `${row.id}-child`, name: "Child File.txt", size: "1KB", type: "file" } ]; resolve(data); }, 1000); // 模拟异步请求延迟 }; // 切换所有行的状态的方法 function toggleExpandAll() { let allExpanded = !tableData.value.some(item => item._expanded === false); function setExpansion(row) { if (!('children' in row)) return; Object.assign(row, {_expanded: allExpanded}); if ('children' in row && Array.isArray(row.children)) for (let child of row.children) setExpansion(child); } for (let rowData of tableData.value){ setExpansion(rowData); } } </script> ``` 上述代码实现了基本的功能需求,即当用户点击“Toggle Expand All”按钮时,会触发 `toggleExpandAll()` 函数逻辑判断当前是否有任何一项处于未展开状态;如果有,则将其余所有的父级节及其后代都设为已展开;反之则全部收缩起来。同时,在初始化数据时给定了一些初始记录作为顶层目录显示出来。 对于更复杂的场景比如动态获取远程API返回的结果集,可以在 `load` 方法内部替换掉模拟延时操作的部分,改为实际发起HTTP请求去取得对应ID下的子元素列表[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值