解决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>

相关推荐
web前端神器5 分钟前
指定阿里镜像原理
前端
枷锁—sha9 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha11 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻18 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜27 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己30 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900137 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2440 分钟前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux