vue |table的data更新但頁面沒有及時渲染

前言

本來在網上找了一些解決方案，說給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)
}