vue+elementui 實現(xiàn)table的row 在hover/click實現(xiàn)展開行效果

zhoutk 發(fā)布于2019-08-26 13:33 / 712人閱讀

摘要：前言產(chǎn)品的需求是在表格一行時展開一行顯示對于此行的增刪改查等操作按鈕當(dāng)前行會收起操作按鈕消息別的行會收起之前的展開且展開當(dāng)前行的實現(xiàn)一樣我就以來說明了吐槽下的確實不那么友好不然也沒必要寫這個文章了是不哈哈需求明確了現(xiàn)在來實現(xiàn)此圖片是的例子這

前言:

產(chǎn)品的需求是,在table表格 click 一行時,展開一行,顯示對于此行的增刪改查等操作按鈕,click當(dāng)前行會收起操作按鈕消息,click 別的行,會收起之前的展開且展開當(dāng)前行.hover的實現(xiàn)一樣,我就以click來說明了.
吐槽下elementUI的api~~~ 確實不那么友好(不然也沒必要寫這個文章了是不~~~)哈哈

需求明確了,現(xiàn)在來實現(xiàn)

此圖片是api的例子,type="expand" 這樣會出現(xiàn)一列">",然而并不能實現(xiàn),繼續(xù)看,

有個這個方法,那我們來實現(xiàn)一些,代碼如下:




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

可見, table標(biāo)簽里,有row-key 需要是你tableData的唯一標(biāo)識,


      

可以看到,我的width值設(shè)置為了0,是為了不讓那個箭頭列顯示,也沒有找到好的方法,項目也比較急,所以就先這樣啦~有好方法歡迎留言給我哦~~
如果對你有幫助,請點個贊,可以更加勤快的分享文章 哈哈~~

GPU云服務(wù)器云服務(wù)器 js實現(xiàn)f11的效果 js實現(xiàn)展開與收起 js實現(xiàn)table排序 VUE實現(xiàn)webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109023.html

相關(guān)文章

vue elementUI table 自定義表頭和行合并

摘要：最近項目中做表格比較多，對表格的使用，只需要傳遞進(jìn)去數(shù)據(jù)，然后寫死表頭即可渲染。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表，第二個元素代表。也可以返回一個鍵名為和的對象。最近項目中做表格比較多，對element表格的使用，只需要傳遞進(jìn)去數(shù)據(jù)，然后寫死表頭即可渲染。但現(xiàn)實中應(yīng)用中，如果寫死表頭，并且每個組件中寫自己的表格，不僅浪費時間而且消耗性能。這個時候需要動態(tài)渲染表頭。...

funnyZhang 2019-08-26 13:53 評論0 收藏0
ElementUI的構(gòu)建流程

摘要：下面一步步拆解上述流程。切換至分支檢測本地和暫存區(qū)是否還有未提交的文件檢測本地分支是否有誤檢測本地分支是否落后遠(yuǎn)程分支發(fā)布發(fā)布檢測到在分支上沒有沖突后，立即執(zhí)行。背景最近一直在著手做一個與業(yè)務(wù)強(qiáng)相關(guān)的組件庫，一直在思考要從哪里下手，怎么來設(shè)計這個組件庫，因為業(yè)務(wù)上一直在使用ElementUI（以下簡稱Element），于是想?yún)⒖剂艘幌翬lement組件庫的設(shè)計，看看Element構(gòu)...

wudengzan 2019-08-23 12:01 評論0 收藏0
實現(xiàn)一個可無限折疊的table

摘要：但實際上就是在上點擊時對其子集進(jìn)行隱藏或顯示通過縮進(jìn)的距離來表現(xiàn)層級關(guān)系在代碼里很東西其實都是偽裝出來的，例如我們要實現(xiàn)的這個可無限折疊的。前言如何在table上實現(xiàn)一個可折疊展開子節(jié)點的table？先看下最終實現(xiàn)效果圖： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其實這個項...

crossea 2019-08-26 12:23 評論0 收藏0
如何寫好一個vue組件,老夫的一年經(jīng)驗全在這了

摘要：比如很好用的拖拽庫控制元素是否被拖動的行為。僅僅負(fù)責(zé)引入以及個人喜好把一個元素當(dāng)做不可見的包裹元素，并在上面使用。你有什么寫組件的獨特技巧，不妨在評論區(qū)告訴我吧一個適用性良好的組件，一種是可配置項很多，另一種就是容易覆寫，從而擴(kuò)展功能 Vue 組件的 API 來自三部分——prop、事件和插槽： prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件 event 允許從組件內(nèi)觸發(fā)外部環(huán)境的副作用 slo...

187J3X1 2019-05-22 10:29 評論0 收藏0
ElementUI的Table組件中的renderHeader方法研究

摘要：難道是因為這個組件自帶標(biāo)簽胡亂猜疑是解決不了問題的。為何稱之為勉強(qiáng)版，因為從上面的也看出來了。再看數(shù)組第二個值，這便是一個完整的示例了。也希望能更加努力的學(xué)習(xí)和進(jìn)步，更深的理解前端這門藝術(shù) 項目使用ElementUI，挺好用的，頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示，代碼如下：本月累計收益截圖如下： sho...

IntMain 2019-08-23 11:55 評論0 收藏0