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,是为了避免让那个箭头列显示,也没有找到好的方法,项目也比较急,因此就先这样啦~有好方法欢迎留言给我哦~~
若是对你有帮助,请点个赞,能够更加勤快的分享文章 哈哈~~