expands

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"

>

{{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: