获取element table 展开行展开状态

element UI组件提供了table的展开和收起功能,

并提供了expand-change事件用来监听table行的展开和收起。

// 伪代码
<template>
	<el-table  @expand-change="handleExpandChange"></el-table>
</template>
<script>
export default {
    methods: {
       handleExpandChange() {
           // Do some things
       } 
    }	
} 
</script>

在一些特殊情况下如处理异步数据时,希望展开行时请求接口,关闭行时不用请求,但是expand-change监听事件,无论是展开还是收起都会触发,于是就希望能有一个类似isExpended布尔类型的状态属性来辅助实现该功能。

// 伪代码
<template>
	<el-table  @expand-change="handleExpandChange"></el-table>
</template>
<script>
export default {
    methods: {
       handleExpandChange(isExpend) {
           // 期望有这么一个isExpend
           if (isExpend) {
               // Do some things
           } else {
               return
           }
       } 
    }	
} 
</script>

但是element并没有提供,或者是我没找到,如果有知道的告诉我,谢谢!

于是就借助expand-change的入参变相实现了该功能

expand-change当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded)row, (expandedRows | expanded)

expand-change会获取两个参数,第一个参数是当前行的数据,第二个参数是当前展开行的数组,:展开时数组加一收起时数组减一。

如果设置table展开列只能有限展开一行时可以根据第二个参数的length来进行判断,如果允许同时展开多行时,这需要判断第二个参数数组中是否包含第一个参数的值,如果包含则是展开,如果不包含则是收起。

// 伪代码
<template>
	<el-table  @expand-change="handleExpandChange"></el-table>
</template>
<script>
export default {
    methods: {
       handleExpandChange(row, rows) {
           // 假设每行数据中有一个id属性
           const isExpend = rows.some(r => r.id === row.id) // 判断当前行展开状态
           if (isExpend) {
               // Do some things
           } else {
               return
           }
       } 
    }	
} 
</script>
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值