element ui table组件展开功能的变更

1、需求

在实际开发中对于table组件的展开功能有下图所需要的需求,

 而elementui提供的组件展开功能是下图这样的,这时候我们就需要用自己写的按钮来触发elementui底层所提供的方法了

 以下是点击自己写的按钮的时候出触发的方法

this.tableData[index].expansion = !this.tableData[index].expansion  //这个是点击的时候为当前数据切换状态

const $table = this.$refs.tableFater.$refs.table  //这个是获取当前table,因为我是自己封装的个table组件所以就通过这种方式获取了

$table.toggleRowExpansion(row)  //这个方法是切换数据的展开还是收起状态

// $table.toggleRowSelection(row)  //同样这个是切换数据是否被选中

 

<el-table-column type="expand">

<template slot-scope="props"> 展开所展现的内容,可以利用render或者formatter过滤数据生成相应的dom结构填充到这儿</template>

</el-table-column>