解决expand-change第一次展开无数据显示与实现

  • 最近写需求时用到了expand-change表格展开回调,但我发现第一次展开后并没有展示任何数据,但我的返回值是存在的,当第二次展开时发现数据就有了。此原因是因为获取数据的接口是异步的,导致Dom渲染不同步导致的,其实解决办法也很简单,只需在外层的表格列表中的每一个数组对象加一个空数据作为默认展示即可
1 . 解决expand-change第一次展开无数据显示问题
  • 首先:定义好需要展示的数据并设置type="expand"展开子表格,用expand-change来获取当前行展开回调,设置row-key防止数据混乱(这个要加上不然,展开行又自己合上了)

    <template> <el-table :data="tableData" @expand-change="handleExpand" :border="parentBorder" style="width: 100%"> <el-table-column type="expand"> <template #default="props">

    State: {{ props.row.number || '' }}

    City: {{ props.row.chargeTime || '' }}

    Address: {{ props.row.serverAmount|| '' }}

    Family

    <el-table :data="props.row.family" :border="childBorder"> <el-table-column label="Name" prop="name" /> <el-table-column label="State" prop="state" /> <el-table-column label="City" prop="city" /> <el-table-column label="Address" prop="address" /> <el-table-column label="Zip" prop="zip" /> </el-table>
    </template> </el-table-column> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> </el-table> </template> <script lang="ts" setup> import { ref } from 'vue'

    const parentBorder = ref(false)
    const childBorder = ref(false)
    const tableData = [
    {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    },
    {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    },
    {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    },
    ]

    // 展开某行详情
    const handleExpand = async (item, expandedRows) => {
    if (!item.expand) {
    const detail = await api.front.remoteConfig.getBillDetail({ number: item.number })
    item.number = detail.number
    item.chargeTime = detail.chargeTime
    item.serverAmount = detail.serverAmount
    item.expand = true
    }
    }
    </script>

相关推荐
北冥湖畔的燕雀2 小时前
C++泛型编程(函数模板以及类模板)
开发语言·c++
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
QX_hao3 小时前
【Go】--map和struct数据类型
开发语言·后端·golang
你好,我叫C小白4 小时前
C语言 循环结构(1)
c语言·开发语言·算法·while·do...while
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
Evand J5 小时前
【MATLAB例程】基于USBL和DVL的线性回归误差补偿,对USBL和DVL导航数据进行相互补偿,提高定位精度,附代码下载链接
开发语言·matlab·线性回归·水下定位·usbl·dvl
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
爱喝白开水a6 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
Neverfadeaway6 小时前
【C语言】深入理解函数指针数组应用(4)
c语言·开发语言·算法·回调函数·转移表·c语言实现计算器
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js