Vue局部刷新</template>下的<el-table>表格数据

Vue局部刷新下的表格数据

index.vue大概内容如下，请问如下在 handleHttpRequest 方法的问号地方写啥

<script setup>
import md5 from "../lib/md5";
import { taskInfo, initTask, preSignUrl, merge, pageUrl,copyBaseUrl,updateIsSucFlag,httpExtra} from '../lib/api';
import {ElNotification} from "element-plus"
import Queue from 'promise-queue-plus'
import axios from 'axios'
import { ref } from 'vue'
const handleHttpRequest = async (options) => {
    const file = options.file
    const task = await getTaskInfo(file)
    if (task) {
        const { finished, path, taskRecord } = task
        const { fileIdentifier: identifier } = taskRecord
        if (finished) {
            return path
        } else {
          
            const { code, data, msg } = await merge(identifier)
            if (code === 200000) {
                // 在这里 ，刷新下的表格数据
                //？？？？？这里应该怎么写？？？局部表格数据刷新，不要location.reload()
            }
        }
    } else {
        ElNotification.error({
            title: '文件上传错误',
            message: '获取上传任务失败'
        })
    }
}
script>

<template>

<el-table
        :data="tableData"
        highlight-current-row
        border
        style="width: 100%">
el-table>


template>

<script>
export default {
  data() {
    return {
      tableData: [],
      error: ''
    }
  },

  methods: {
    ...
  },

  beforeCreate() {
    this.axios = axios;
  },

  created() {
    ..
  },

}
script>

局部刷新给tableData重新赋值即可。没见过这种两个script混用composition api 和option api 的，先用下面的代码试试看获取this，再获取不到this的话，就不用顶层setup了，用setup函数混合option api 吧

import { getCurrentInstance} from 'vue'
   // 获取this
    const { ctx } = getCurrentInstance()
    const _this = ctx

然后再在问号那里赋值

handleHttpRequest增加一个参数，比如vm，通过vm.tableData=data来设置数据，调用时传入vue实例，大概如下

<script setup>
import md5 from "../lib/md5";
import { taskInfo, initTask, preSignUrl, merge, pageUrl,copyBaseUrl,updateIsSucFlag,httpExtra} from '../lib/api';
import {ElNotification} from "element-plus"
import Queue from 'promise-queue-plus'
import axios from 'axios'
import { ref } from 'vue'
const handleHttpRequest = async (options,vm) => {
    const file = options.file
    const task = await getTaskInfo(file)
    if (task) {
        const { finished, path, taskRecord } = task
        const { fileIdentifier: identifier } = taskRecord
        if (finished) {
            return path
        } else {

            const { code, data, msg } = await merge(identifier)
            if (code === 200000) {
                vm.tableData = data;
            }
        }
    } else {
        ElNotification.error({
            title: '文件上传错误',
            message: '获取上传任务失败'
        })
    }
}
</script>

<template>

    <el-table :data="tableData"
              highlight-current-row
              border
              style="width: 100%">
    </el-table>


</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                error: ''
            }
        },

        methods: {
            refresh() {//刷新方法
                let options = {/*....*/ }//注意修改options对象
                handleHttpRequest(options,this);//传入vue实例
            }
        },

        beforeCreate() {
            this.axios = axios;
        },

        created() {
            //  ..
        },

    }
</script>

望采纳！！！

建议参考这篇文章：
https://blog.csdn.net/weixin_41498246/article/details/125049768

if (code === 200000) {
  this.tableData = data;
}

刷新下的表格数据

this.tableData = data;

可以在调用handleRequest的地方传入vue实例，也就是this，然后vm.tableData=data