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,是为了不让那个箭头列显示,也没有找到好的方法,项目也比较急,所以就先这样啦~有好方法欢迎留言给我哦~~

如果对你有帮助,请点个赞,可以更加勤快的分享文章 哈哈~~