vue怎么只传当前行的数据到后端
可以通过以下步骤实现只传当前行的数据到后端:
-
在表格中绑定一个选择列,让用户可以选择需要提交的行。
-
在选择列中使用 Checkbox 组件,让用户可以勾选需要提交的行。
-
在数据中添加一个数组属性 selectedRows,用于存储用户选择的行数据。
-
在 Checkbox 组件的 v-model 中绑定 selectedRows 数组。
-
在提交数据时,只提交 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>
原文地址: https://www.cveoy.top/t/topic/Y9B 著作权归作者所有。请勿转载和采集!