这篇文章给大家分享的是有关element ui table如何实现点击一行展开功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
专注于为中小企业提供成都网站制作、成都网站设计、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业白碱滩免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
前言
element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。
element ui表格中有一个功能是展开行，在2.0版本官网例子中，只可以点击右箭头可以展开，我们的很多需求是点击某一行展开
那是不是无法实现呢？其实，借助element ui的一些属性，轻松实现点击某行展开，我们还是用2.0.9版本官网的例子，
对齐改造，使之可以做到这点
{{ props.row.name }}
{{ props.row.shop }}
{{ props.row.id }}
{{ props.row.shopId }}
{{ props.row.category }}
{{ props.row.address }}
{{ props.row.desc }}
这个例子可以直接复制运行起来，一点问题都没有，上面的代码可以实现点击某行展开，对比官网的例子，我们在table添加了
row-key="id"
:expand-row-keys="expands"
@row-click="rowClick"
这里有2个问题：
1.数据中每项没有一个唯一标示怎么办？
2.实现展开当前行的时候，其他行都能收起来
这2个问题也很简单。第2个问题，在rowClick函数给expands添加之前，先清空这个数组。
if (this.expands.indexOf(row.id) < 0) {
this.expands = []
this.expands.push(row.id);
} else {
this.expands.remove(row.id);
}感谢各位的阅读！关于“element ui table如何实现点击一行展开功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网页标题：elementuitable如何实现点击一行展开功能
URL标题：
http://cdxtjz.com/article/gpehds.html
