el-table的展开折叠功能,点击任意位置都可下拉

已于 2023-08-22 14:26:59 修改
阅读量174 收藏
点赞数
文章标签： vue.js elementui javascript
于 2023-08-22 13:31:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pengry123/article/details/132423966
版权

如图

 要求点击任意位置不仅仅是下拉小箭头也要下拉展开.

 

 直接复用el-element方法即可

     <el-table
        ref="tableRefs"
        :data="listTable"
        style="width: 100%"
        highlight-current-row
        @row-click="clickTable"
      >
    .....
     </el-table>


  methods:{
     clickTable(row, index, e) {
      this.$refs.tableRefs.toggleRowExpansion(row)
    }
   }

爱吃辣子鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 el[email protected]，使用前请熟悉：el[email protected]el[email protected]安装npm install --save el-table-infinite-...
element-ui中el-table点击其他自定义按钮展开table中某一行
茂茂的博客
02-17 4851
在日常开发中，我们遇见了会有点击某些按钮，使得表格行展开的需求，这时候去查看文档 element-ui（table） 这里官方提供了示例为在行最左侧有一个展开合并icon，但是点其他地方不能展开，我们又想点其他地方而展开 我们看见是在table-column上定了type为expand，而该列里面的自定义模板便是展开后显示的内容 我们想要实现点击自定义功能，继续查阅文档： 这里的expand-row-keys文档解释说可以设置当前已展开的行，那么我们可以给table绑定这个属性，在点击方法里面进行绑定
el-table全部展开和全部折叠子菜单功能
qq_307183846的博客
03-25 807
// 展开 expandAll() { let els = document.getElementsByClassName('el-table__expand-icon') if (this.tableData.length !== 0 && els.length !== 0) { for (let j = 0; j < els.length; j++) { els[j].classList.add('dafult') .
修改element-ui table组件展开/收起图标、支持点击行展开/收起、隐藏不可展开行得图标
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-03 980
记录了如果修改element-ui table组件图标、点击行展开/收起等功能。
elementui table的折叠（展开、收缩）图标移位的方法
q1025387665a的博客
05-13 1852
前言：今天又是给csdn上的复读机们恶心的一天，一查，全是type=“”，type=“:”，我不知道，难道你们没发现放到最后一列的时候折叠的缩进没了？干！ 解决方法 .el-table [class*="el-table__row--level"] .el-table__expand-icon { font-size: 18px; font-weight: bold; position: absolute; right: -785px; top: 15px; z-index: 999
el-table 展开行功能，隐藏箭头按钮列
momo的博客
04-25 269
el-table 展开行功能，隐藏箭头按钮列。
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-table实现行内编辑功能
10-15
主要为大家详细介绍了vue el-table实现行内编辑功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue修改Element的el-table样式的4种方法
10-14
主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1109
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
VueScan Pro中文
最新发布
CSDN专家-微编程的博客
05-19 242
VueScan Pro中文是一款VueScan图像扫描软件,提供色彩平衡和颜色校正功能,适用于6500多台扫描仪,VueScan破解版内置驱动,可以对扫描仪软件反向工程,支持200种以上的底片类型,复杂的白色平衡算法,用于检查物体表面暇疵的红外线底片扫描,成批扫描,自动剪取图像等等,提高扫描仪的扫描速度和工作效率.
vue 使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超一秒时自动切换到对应分区
weixin_45956838的博客
05-17 561
使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超过一秒自动切换到对应分区
el-table 展开行要点击两次才能展开
10-20
el-table 展开行需要点击两次才能展开的原因可能是因为你的代码中没有正确绑定展开行的事件。一般来说，展开行需要绑定 click 事件，并且在事件处理函数中修改展开行的状态。如果你的代码中只是简单地绑定了 click 事件，但没有修改展开行的状态，那么就需要点击两次才能展开。 以下是一个简单的示例代码，你可以参考一下： ``` <template> <el-table :data="tableData" @row-click="handleRowClick"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <<el-table-column type="expand"> <template slot-scope="props"> <p>性别：{{ props.row.gender }}</p> <p>地址：{{ props.row.address }}</p> </template> </el-table-column>> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男', address: '北京市海淀区' }, { name: '李四', age: 20, gender: '女', address: '上海市浦东新区' }, { name: '王五', age: 22, gender: '男', address: '广州市天河区' } ] } }, methods: { handleRowClick(row, column, event) { // 判断当前行是否已经展开 if (row.expanded) { // 如果已经展开，则将展开状态设置为 false row.expanded = false } else { // 如果未展开，则将展开状态设置为 true row.expanded = true } } } } </script> ``` 在上面的代码中，我们通过 @row-click 绑定了展开行的点击事件，并在事件处理函数 handleRowClick 中修改了展开行的状态。这样就可以实现点击一次展开行的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值