[解决问题]vue el-table的data更新但页面没有及时渲染

太过爱你忘了你带给我的痛 2022-12-02 10:47 946阅读 0赞

# 前言 #

本来在网上找了一些解决方案，说给table加上key就可以，然后我试了一下发现显示的还是上次渲染的数据。然后循着这个路子摸出了另一个方法

# 捋思路 #

### 需求 ###

*  在一个表格内镶嵌一个表格，镶嵌的表格会根据所展开的行信息去发送请求并将最新数据渲染在页面上
 *  采取的是手风琴效果，即只显示一行的数据

### 问题 ###

镶嵌表格的数据更新了，但是页面没有及时渲染

### 解决 ###

*  **用模板`<template>`包裹镶嵌表格，并规定插槽作用域`slot-scope="props"`**
 *  **在镶嵌表格中，用`:key="props.row.id"`指明身份**

--------------------

手风琴及效果部分：

*  用官方提供的`expand-change`方法，每次关闭或展开行都会触发
 *  用`v-loading`来增强效果（如果不加，可能会先看到原来的数据，效果不好）

--------------------

# 代码实现 #

模板部分：

<el-table :data="tableData" border ref="orderTable" @expand-change="expandChange">
            <el-table-column type="expand">
    			   <template slot-scope="props">
    					<el-table :data="tableInfoData" :key="props.row.id" v-loading="loading">
    						<el-table-column label="份数" prop="number"/>
    						<el-table-column label="订单号" prop="order_id"/>
    						<el-table-column label="金额" prop="money">
    						</el-table-column>	
    					</el-table>
    			   </template>
    		    </el-table-column>
            <el-table-column prop="department" label="部门" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="phone" label="电话号码" />
    </el-table>

data部分：

//主表格数据
    tableData: [],
    
    //镶嵌表格数据
    loading:false,
    tableInfoData:[],

methods部分：展开行获取数据

//第一个参数是展开的行数据；第二个参数是一个数组，里面是所有展开的行
    async expandChange(row,expandRows){ 
      this.loading=true
      let id=row.id
      
      //定义展开行id
      let expandid=''
      
      //手风琴效果
      const $orderTable = this.$refs.orderTable
      if(expandRows.length>1){ 
        expandRows.forEach(expandRow=>{ 
          //拿刚刚点击的行与现目前展示的行作比较，id不一致即表示要关闭其他展开行
          if(id!==expandRow.id){ 
          	//toggleRowExpansion是官方提供的方法，用于改变某一行的展开状态
            $orderTable.toggleRowExpansion(expandRow, false)
          }
        })
      }else{ 
      	//获取展开行id
        expandid=expandRows[0].order_id
      }
      
      //请求镶嵌表格的数据，假设需要发送参数——展开行的id：
      const res = await getDetails({ 
        id:expandid,
      });
      if (res.msg === "ok") { 
        this.tableInfoData = Array.from(res.data);
        this.loading=false
      }
    },

其中`getDetails`是引入的方法：

export function getDetails(params) { 
        const url = '...'
        return $axios.get(url, params)
    }