共计 791 个字符，预计需要花费 2 分钟才能阅读完成。
前言:
产品的需求是, 在 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, 是为了不让那个箭头列显示, 也没有找到好的方法, 项目也比较急, 所以就先这样啦~ 有好方法欢迎留言给我哦~~ 如果对你有帮助, 请点个赞, 可以更加勤快的分享文章 哈哈~~
