前言:
产品的需求是,在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,是为了不让那个箭头列显示,也没有找到好的方法,项目也比较急,所以就先这样啦~有好方法欢迎留言给我哦~~
如果对你有帮助,请点个赞,可以更加勤快的分享文章 哈哈~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。