elementUI table 嵌套 展开行 实现嵌套table数据更新或者获取数据 添加loading效果

    <el-table :data="tableData"   @expand-change="expandChange" border>
        <el-table-column type="expand">
          <template #default="props">
            <div  v-for="(item,index)  in  props.row" :key="index+'task'">
              <el-table :data="item"
              v-loading="props.row.loading"
              >
                <el-table-column
                  align="center"
                  label="序号"
                  width="100"
                  type="index"
                />
              </el-table>
            </div>
          </template>
        </el-table-column>
      <el-table-column
        align="center"
        label="序号"
        width="100"
        type="index"
      />

    </el-table>


  async  getData(){
           let {rows, total, code } = await getList(query)
        for (let i in rows) {
                //添加loading属性 默认为false
                rows[i].loading= false
            }
             this.tableData = rows
    }


    async  expandChange(row,expandedRows) {//展开  查看某一行  然后更新loading属性
        if(expandedRows.length>0){
          for(let m of this.tableData){
            if(m.id ===row.id){
              m.loading = true
              let {rows, total, code } = await getnewList(query)
                //数据处理后 修改loading 为false  实现loading效果
              setTimeout(() => {m.loading = false},500)
            }
          }
        }
      }