element table 判断当前行是否展开和只展开一行

element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起

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

借助expand-change的参数实现 判断展开还是关闭

expand-change会获取两个参数，第一个参数是当前行的数据，第二个参数是当前展开行的数组

注：展开时数组会加一，收起时数组会减一。

<template>
	<el-table  @expand-change="handleExpandChange"></el-table>
</template>

<script setup lang="ts">
    const expandchange = async (row: any, rows: any) => {
        const isExpend = rows.some((r:any) => r.id === row.id) // 判断当前行展开状态
        if (isExpend) {
            console.log('当前行已展开')
            //调取接口

        } else {
            console.log('当前行已关闭')
            return
        }

    }
</script>

 实现只展开一行

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

 :row-key='getRowKeys'              作为每一项的key，确保唯一性

:expand-row-keys="expands"     用来存储唯一的值

   <el-table :data="tableData" border style="width: 100%" @expand-change="expandchange" :row-key="getRowKeys"  :expand-row-keys="expends"></el-table>

<script setup lang="ts">

const getRowKeys = (row) => {
    return row.id
}
const expends = ref([])
const expandchange = async (row: any, rows: any) => {

     if (rows.length) {//说明展开了
        expends.value = []
        if (row) {
            expends.value.push(row.id)//只展开当前行id
        }
    } else {
        expends.value = []
        return
    }

}

</script>