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

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

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

前言:

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

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

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

有個(gè)這個(gè)方法,那我們來實(shí)現(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,是為了不讓那個(gè)箭頭列顯示,也沒有找到好的方法,項(xiàng)目也比較急,所以就先這樣啦~有好方法歡迎留言給我哦~~
如果對你有幫助,請點(diǎn)個(gè)贊,可以更加勤快的分享文章 哈哈~~

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

摘要：比如很好用的拖拽庫控制元素是否被拖動(dòng)的行為。僅僅負(fù)責(zé)引入以及個(gè)人喜好把一個(gè)元素當(dāng)做不可見的包裹元素，并在上面使用。你有什么寫組件的獨(dú)特技巧，不妨在評論區(qū)告訴我吧一個(gè)適用性良好的組件，一種是可配置項(xiàng)很多，另一種就是容易覆寫，從而擴(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方法研究

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

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