从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章给大家分享的是有关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如何实现点击一行展开功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图