element的table 表格 expand-change事件遇到的bug，记录下

业务场景是，一个table表格中嵌套table，当点击展开时，需要点击2次才能真正展开列表，我是通过设置外层table的一个属性isExpand的属性值来判断当前行的点击是展开还是折叠状态，废话不多说，直接上图片

首先获取table表格数据时，添加了一项，用来表示行的展开与折叠

下面图片中框住的部分很重要，这个就是造成第一次点击展开，其实已经发送请求，但子table并未展开，需要再点一次才能出来，这块，我猜想是因为最外层的表格数据是响应式数据，传递的参数row也是响应式的，因此改了row.isExpand，造成了页面刷新，所以第一次点击没有展开，第二次才展开，图中圈中的部分，把row的响应式数据变成非响应式数据就可以了，点击展开立即就可以展开子table

贴下我的代码

111111

<div class="my-table">
              <MyTable ref="myTableRef" v-loading="loading" :columns="tableColumn" :table-data="tableData" :options="options"
               @command="handleCommand"
                @pagination-change="(page, pageSize) => _getTableData(page, pageSize)"
                主要就是看下👇这一行，展开事件的调用方法
                @expand-change="(row, obj)=>_getbaseStationTableData(row,obj)">
                <!-- slot,子级table -->
                <template #expand="{ row }: any" >
                <MyTable v-loading="baseStationLoading" :columns="baseStationTableColumn" :table-data="baseStationTableData" :options="{...baseStationOptions,empty:true}"
                    >
                    <!-- 插槽表头 -->
                    <template #deliveryHeader="{ column }: any">
                      <el-icon color="#b6b6b6" style="font-size:16px;cursor: pointer;">
                        <Plus  @click="onBaseStationAdd" />
                      </el-icon>
                    </template>
                    <!-- 插槽操作项 -->
                    <template #opera="{ row }: any">
                      <el-icon color="#b6b6b6" style="font-size:16px;cursor: pointer;">
                        <Minus @click="onBaseStationDel(row)" />
                      </el-icon>
                    </template>
                    <!-- 插槽无数据项 -->
                    <template #empty> 暂无数据</template>
                  </MyTable>
                </template>
              </MyTable>

22222

const _getTableData = async (pageNum = 1, pageSize = 10) => {
  loading.value = true
  try {
    const res = await httpGet(`${devApiUrl}/lcap/v1/building?parkId=${props.parkId}&current=${pageNum}&size=${pageSize}`)
    if (res && res.code && res.code == '00000') {
      tableData.value = (res.data && res.data.rows) || []
      // 添加一项数据，判断该行是否是展开的状态，重点就下面👇这一行代码
      tableData.value = (res.data && res.data.rows && res.data.rows.length) && tableData.value.map((item) => ({ ...item, isExpand:false }))
      options.value.paginationConfig.total = (res.data && res.data.total) || 0
      loading.value = false
    } else {
      loading.value = false
      console.log('获取建筑信息失败')
    }
  } catch (error) {
    console.log(error)
    loading.value = false
  }
}

333333

 const _getbaseStationTableData = async (row, obj) => {
    // 需要把row的响应式数据变成非响应式数据，这个很重要，这样的话，就不会出现需要点击两次才能真正展开子级table
    row = toRaw(row)
    // 如果之前展开过，不需要再次请求数据，直接return
    // 这里分为两种情况，
    // 第1种是：他点击的折叠，那么更加不需要再次请求数据
    // 第2种情况是，他是第2次点击展开，那么也不需要请求远层数据
    if(row.isExpand){
      return
    }
    // 代码至此，说明是第一次点击展开，那么需要请求远层数据，并且设置展开状态
    row.isExpand = !row.isExpand
    //// 后面的可以不看，重点就是代码前面的
    baseStationLoading.value = true
    try {
      const res = await httpGet(`/api/lcap/v1/building/${row.id}/zones`)
      if (res && res.code && res.code == '00000') {
        baseStationTableData.value = (res.data && res.data) || []
        baseStationLoading.value = false
      } else {
        baseStationLoading.value = false
        console.log('获取基站列表失败')
      }
    } catch (error) {
      console.log(error)
      baseStationLoading.value = false
    }
  }