el-table中el-table-column下的操作切换class样式

最新推荐文章于 2024-05-11 08:30:00 发布

周家大小姐.

最新推荐文章于 2024-05-11 08:30:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.0 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_40190624/article/details/126057207

这篇博客介绍了如何在网页表格设计中，当操作按钮超过3个时，将它们整合到'更多'菜单中。点击'更多'会展示按钮，再次点击则隐藏，同时处理多个行的展开与关闭状态。文章通过HTML、CSS和JavaScript代码展示了实现这一功能的完整示例，并讨论了交互逻辑和状态管理。

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

需求:用操作按钮太多;设计这边想如果按钮大于3个就把它放在更多中;如果点击更多;就向左出现;再点击就隐藏,如果当前row为展开又点其它row的更多 ;就把这个展开的关闭箭头恢复成向左显示

代码:

el-table结合el-popover弹出框

html:

   <el-popover
                  placement="left-end"
                  width="200"
                  trigger="click"
                  popper-class="xk-flex-popover"
                  :offset="-15"
                  :visible-arrow="false"
                  @show="handleShow(scope.$index)"
                  @hide="handleHide(scope.$index)"
                >
                  <!-- <transition name="slide-fade">  v-if="scope.$index == isRotateIndex"-->
                  <div>
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleEditReport(scope.row)