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

相关推荐
江城开朗的豌豆5 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er13 分钟前
【前端工程化】前端组件模版构建那些事
前端
尘浮72814 分钟前
60天python训练计划----day59
开发语言·python
前端 贾公子14 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆19 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山27 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45336 分钟前
css模块化以及rem布局
前端·javascript·css