vue+elementui 实现table的row 在hover/click实现展开行效果

zhoutk 发布于2019-08-26 13:33 / 612人阅读

摘要：前言产品的需求是在表格一行时展开一行显示对于此行的增删改查等操作按钮当前行会收起操作按钮消息别的行会收起之前的展开且展开当前行的实现一样我就以来说明了吐槽下的确实不那么友好不然也没必要写这个文章了是不哈哈需求明确了现在来实现此图片是的例子这

前言:

产品的需求是,在table表格 click 一行时,展开一行,显示对于此行的增删改查等操作按钮,click当前行会收起操作按钮消息,click 别的行,会收起之前的展开且展开当前行.hover的实现一样,我就以click来说明了.
吐槽下elementUI的api~~~ 确实不那么友好(不然也没必要写这个文章了是不~~~)哈哈

需求明确了,现在来实现

此图片是api的例子,type="expand" 这样会出现一列">",然而并不能实现,继续看,

有个这个方法,那我们来实现一些,代码如下:




rowClick(row,column,event){
        this.$refs.refTable.toggleRowExpansion(row);
      },
expandChange(row,expandedRows){
        if(expandedRows.length>1){
          expandedRows.shift()
        }
      },

可见, table标签里,有row-key 需要是你tableData的唯一标识,


      

可以看到,我的width值设置为了0,是为了不让那个箭头列显示,也没有找到好的方法,项目也比较急,所以就先这样啦~有好方法欢迎留言给我哦~~
如果对你有帮助,请点个赞,可以更加勤快的分享文章 哈哈~~

GPU云服务器云服务器 js实现f11的效果 js实现展开与收起 js实现table排序 VUE实现webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109023.html

vue elementUI table 自定义表头和行合并

摘要：最近项目中做表格比较多，对表格的使用，只需要传递进去数据，然后写死表头即可渲染。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。也可以返回一个键名为和的对象。最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。...

funnyZhang 2019-08-26 13:53 评论0 收藏0
ElementUI的构建流程

摘要：下面一步步拆解上述流程。切换至分支检测本地和暂存区是否还有未提交的文件检测本地分支是否有误检测本地分支是否落后远程分支发布发布检测到在分支上没有冲突后，立即执行。背景最近一直在着手做一个与业务强相关的组件库，一直在思考要从哪里下手，怎么来设计这个组件库，因为业务上一直在使用ElementUI（以下简称Element），于是想参考了一下Element组件库的设计，看看Element构...

wudengzan 2019-08-23 12:01 评论0 收藏0
实现一个可无限折叠的table

摘要：但实际上就是在上点击时对其子集进行隐藏或显示通过缩进的距离来表现层级关系在代码里很东西其实都是伪装出来的，例如我们要实现的这个可无限折叠的。前言如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其实这个项...

crossea 2019-08-26 12:23 评论0 收藏0
如何写好一个vue组件,老夫的一年经验全在这了

摘要：比如很好用的拖拽库控制元素是否被拖动的行为。仅仅负责引入以及个人喜好把一个元素当做不可见的包裹元素，并在上面使用。你有什么写组件的独特技巧，不妨在评论区告诉我吧一个适用性良好的组件，一种是可配置项很多，另一种就是容易覆写，从而扩展功能 Vue 组件的 API 来自三部分——prop、事件和插槽： prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slo...

187J3X1 2019-05-22 10:29 评论0 收藏0
ElementUI的Table组件中的renderHeader方法研究

摘要：难道是因为这个组件自带标签胡乱猜疑是解决不了问题的。为何称之为勉强版，因为从上面的也看出来了。再看数组第二个值，这便是一个完整的示例了。也希望能更加努力的学习和进步，更深的理解前端这门艺术项目使用ElementUI，挺好用的，页面中有些地方的帮助提示通过使用组件Tooltip和el-icon-question来展示，代码如下：本月累计收益截图如下： sho...

IntMain 2019-08-23 11:55 评论0 收藏0