expands

更新时间:2022-12-30 01:20:24 阅读: 评论:0


2022年12月30日发(作者:保险箱英文)

vue-elementel-table点击⾏展开,并且收起其他⾏

CodeIsNeverDie!

代码⾏中已标注实现点击⾏展开,并且⾃动收起其他⾏的相关设置和代码。

el-table表格是绑定在vue实例上的,相关配置、绑定数据、事件将这三部分可以直接Copy到⾃⼰的项⽬相关位置,⽆需修改可以直接使⽤

!

-table相关配置

:row-key="getRowKeys"//每⼀⾏的唯⼀key值

:expand-row-keys="expands"//设置⽬前的展开⾏(须同时设置row-key)

@expand-change="expandSelect"//对某⾏展开/关闭触发

@row-click="clickTable"//点击单⾏事件

2.绑定数据

//展开⾏,数组形式

expands:[],

//每⾏的唯⼀key值⽤其id表⽰

getRowKeys(row){

;

},

3.点击⾏与展开事件

//点击⾏展开事件

clickTable(row,index,e){

this.$RowExpansion(row);

},

//折叠⾯板每次只能展开⼀⾏

expandSelect(row,expandedRows){

//('expandedRows',expandedRows)

//('row',row)

varthat=this;

if(){

s=[];

if(row){

();//每次push进去的是每⾏的ID

}

}el{

s=[];//默认不展开

}

},

完整代码提供参考

:row-key="getRowKeys"

:expand-row-keys="expands"

@expand-change="expandSelect"

@row-click="clickTable"

element-loading-text="拼命加载中"

element-loading-spinner="el-icon-loading"

element-loading-background="rgba(0,0,0,0.8)"

:data="typeList"

ref="refTable"

>

{{u}}

click="lectconnect(,)"

size="small"

icon="el-icon-s-data"

>弱⼝令破解

>

{{e}}

vartestarea=newVue({

el:'#workspace',

data:{

expands:[],

getRowKeys(row){

;

},

......

},

methods:{

//点击⾏展开事件

clickTable(row,index,e){

this.$RowExpansion(row);

},

//折叠⾯板每次只能展开⼀⾏

expandSelect(row,expandedRows){

//('expandedRows',expandedRows)

//('row',row)

varthat=this;

if(){

s=[];

if(row){

();//每次push进去的是每⾏的ID

}

}el{

s=[];//默认不展开

}

},

......

}

})

PS:

本文发布于:2022-12-30 01:20:24,感谢您对本站的认可!

本文链接:http://www.wtabcd.cn/fanwen/fan/90/56632.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

上一篇:jacket
下一篇:月饼的传说
标签:expands
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图