可以通过以下步骤实现只传当前行的数据到后端:

  1. 在表格中绑定一个选择列,让用户可以选择需要提交的行。

  2. 在选择列中使用 Checkbox 组件,让用户可以勾选需要提交的行。

  3. 在数据中添加一个数组属性 selectedRows,用于存储用户选择的行数据。

  4. 在 Checkbox 组件的 v-model 中绑定 selectedRows 数组。

  5. 在提交数据时,只提交 selectedRows 数组中的数据即可。

以下是一个示例代码:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="selection" v-model="selectedRows">
      </el-table-column>
      <el-table-column prop="name" label="Name">
      </el-table-column>
      <el-table-column prop="age" label="Age">
      </el-table-column>
    </el-table>
    <el-button @click="submitData">Submit</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John', age: 20 },
          { name: 'Alice', age: 25 },
          { name: 'Bob', age: 30 },
        ],
        selectedRows: [],
      }
    },
    methods: {
      submitData() {
        const data = this.selectedRows;
        // 发送请求提交数据
        console.log('Selected rows:', data);
      },
    },
  }
</script>
vue怎么只传当前行的数据到后端

原文地址: https://www.cveoy.top/t/topic/Y9B 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录