vue+elementui 實現table的row 在hover/click實現展開行效果

前言:

產品的需求是,在table表格 click 一行時,展開一行,顯示對於此行的增刪改查等操做按鈕,click當前行會收起操做按鈕消息,click 別的行,會收起以前的展開且展開當前行.hover的實現同樣,我就以click來講明瞭.
吐槽下elementUI的api~~~ 確實不那麼友好(否則也不必寫這個文章了是不~~~)哈哈

需求明確了,如今來實現

此圖片是api的例子,type="expand" 這樣會出現一列'>',然而並不能實現,繼續看,

有個這個方法,那咱們來實現一些,代碼以下:

<el-table :data="tableData"  ref="refTable"  row-key="id" :expand-row-keys="expands"
  @expand-change="expandChange" @row-click="rowClick">


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

可見, table標籤裏,有row-key 須要是你tableData的惟一標識,

<el-table-column type="expand" width="0" fixed="right" label="more">
      <template slot-scope="scope">
      這裏寫你須要展開的內容
      </template>
</el-table-column

能夠看到,個人width值設置爲了0,是爲了避免讓那個箭頭列顯示,也沒有找到好的方法,項目也比較急,因此就先這樣啦~有好方法歡迎留言給我哦~~
若是對你有幫助,請點個贊,能夠更加勤快的分享文章 哈哈~~