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