const targetRow = this.tableData.rows.splice(oldIndex,1)[0] this.tableData.rows.splice(newIndex,0,targetRow) 这样数据更新页面不更新，应该怎么修改

这个JavaScript代码片段涉及到数组操作，它从`tableData.rows`数组中删除旧索引处的一个元素（`oldIndex`），然后将该元素插入到新索引处（`newIndex`）。然而，由于直接对`this.tableData.rows`进行赋值，Vue的响应式系统无法跟踪数组的变化，导致视图不会自动更新。

要在Vue中实现数组变更后的页面更新，你应该使用`set`方法或者Vue提供的`$emit`和`v-model`绑定来触发视图更新。以下是修改后的示例：

// 使用 Vue 的 set 方法来更新数组
this.$set(this.tableData, 'rows', [...this.tableData.rows.slice(0, oldIndex), // 备份并截取部分数组
targetRow, // 插入新的元素
...this.tableData.rows.slice(oldIndex + 1)]); // 将剩余部分拼接回去

// 或者使用事件和计算属性
// 1. 创建一个方法处理数组变化
methods: {
  updateArray(oldIndex, newIndex) {
    const newRow = this.tableData.rows.splice(oldIndex, 1)[0];
    this.tableData.rows.splice(newIndex, 0, newRow);
    this.$emit('arrayUpdated'); // 触发自定义事件
  }
}

// 2. 更新模板中监听事件
<template>
  <div v-on:arrayUpdated="updateTable">...</div> <!-- 更新视图的地方 -->
</template>

// 计算属性接收事件更新
computed: {
  updatedRows() { // 如果不想每次都触发渲染，可以用计算属性缓存结果
    return this.tableData.rows;
  }
}

通过这种方法，每次数组发生改变时，Vue都会检测到并自动更新视图。