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"
>
:data="handleData(holeData,)"
style="
width:100%;
margin:0auto;
border:1pxsolid;
border-color:#00a1d6;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-color:transparent;
"
>
{{}}
{{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小时内删除。
留言与评论(共有 0 条评论) |