首页vue3 互换el-table中的两行数据

vue3 互换el-table中的两行数据

时间: 2024-12-10 08:43:08 浏览: 53

在 Vue3 中，如果你想要交换 el-table 中的两行数据，可以利用数组的 splice() 方法结合响应式特性来实现。假设你有这样一个表格数据数组 tableData，并且数据结构是类似对象数组：

// 假设 tableData 是这样的
data() {
  return {
    tableData: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
      // 更多数据...
    ]
  }
}

你可以创建两个方法，一个用于获取当前行索引，另一个用于交换数据：

methods: {
  swapRows(row1Index, row2Index) {
    // 验证索引是否有效
    if (row1Index >= 0 &amp;&amp; row1Index < this.tableData.length &amp;&amp; row2Index >= 0 &amp;&amp; row2Index < this.tableData.length) {
      // 使用 splice 方法交换位置
      const temp = this.tableData[row1Index];
      this.tableData.splice(row1Index, 1);
      this.tableData.splice(row2Index, 0, temp);

      // 因为数组操作会触发 Vue 的更新过程，所以不需要手动通知变化
    } else {
      console.error('Invalid row index');
    }
  }
}

然后在模板中，通过点击事件调用这个方法：

<template>
  <el-table :data="tableData" @click.native="(e) => handleRowSwap(e.target.dataset.rowIndex, e.target.previousElementSibling.dataset.rowIndex)">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  methods: {
    handleRowSwap(row1, row2) {
      this.swapRows(row1, row2);
    }
  }
};
</script>