在做视频上传显示进度的时候遇到的问题，这里模拟一下大概得过程，记录一下。

本文链接：https://blog.csdn.net/m0_62317155/article/details/131143745

在做视频上传显示进度的时候遇到的问题

我在使用element plus的el-upload视频文件分片上传的过程中，想自己自定义一个上传的文件列表展示，结果在展示进度条的时候遇到了问题，这里大概模拟一下这个过程。顺便记录一下遇到的问题。具体看下面的代码和截图

遇到的问题如下

具体看这里element plus中el-upload分片上传文件_m0_62317155的博客-CSDN博客
从下面的gif图中，我们可以看到，进度条一直是变化的，但是表格中的进度条并没有变化，而且表格中的数据也发生了变化，但是表格中的进度条显示就有问题。
在这里插入图片描述

代码如下

<template>
  <div>
    <el-button @click="handleClick">给表格数组赋值，展示表格</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="名字"></el-table-column>
      <el-table-column prop="percentage" label="进度">
        <template #default="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.percentage" />
      </template>
      </el-table-column>
    </el-table>
    <el-row>下面是外部进度条，响应式的数据ref，用于对比表格的进度条</el-row>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" />
    <el-row>
      <el-row>修改表格中的进度条</el-row>
      <el-input-number v-model="inputValue" :min="1" :max="100" @change="handleChange" />
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Item {
  uid: number
  name: string,
  percentage: number
}

const percentage = ref(0)

const inputValue = ref(100)

const tableData = ref<Item[]>([])

let id = 0
const handleClick = async () => {
  id += 1

  // 非响应式的object
  const item: Item =  {uid: id ,name: `名字==《${id}》`, percentage: 0}

  // 这里是pushu
  tableData.value.push(item)

  // tableData.value.push({...item})

  const index = tableData.value.findIndex((element: any) => element.uid === item.uid)

  for (let i = 0; i <= 100; i+=10) {
   percentage.value = i
   item.percentage = i
   // 修改tableData的数据
   tableData.value[index].percentage = i
   console.log('进度：',item.percentage)

  //  让for循环停顿一秒进行
   await sleep(1000)
  }

  // let i = 0
  // const interval = setInterval(() => {
  //  i += 10
  //  percentage.value = i
  //  item.percentage = i
  //  tableData.value[index].percentage = i
  //  console.log(item.percentage)
  //  if(i === 100) {
  //   clearInterval(interval)
  //  }
  // }, 1000)

}

/**
 * 使程序暂停指定的时间，起到延时的效果
 */
const  sleep = (time: any) => {
 return new Promise((resolve) => setTimeout(resolve, time));
}

// 数组输入框的事件
const handleChange = (value: number) => {
  // console.log(value)
  tableData.value[0].percentage = value
}



</script>

<style scoped>
</style>