element ui表格后两列用数组存一下,然后传回后台
时间: 2024-02-16 07:37:08 浏览: 32
可以按照以下步骤来实现:
1. 在表格中定义需要存储的数据列,例如:
```html
<el-table-column prop="col1"></el-table-column>
<el-table-column prop="col2"></el-table-column>
<el-table-column label="数组列">
<template slot-scope="scope">
<el-input v-model="scope.row.array[0]"></el-input>
<el-input v-model="scope.row.array[1]"></el-input>
</template>
</el-table-column>
```
其中,`col1`和`col2`是需要存储的普通列,`array`是需要存储的数组列,它是一个长度为2的数组,可以通过`v-model`双向绑定。
2. 在表格数据中定义数组列的初始值,例如:
```javascript
data() {
return {
tableData: [
{ col1: 'data1', col2: 'data2', array: [0, 0] },
{ col1: 'data3', col2: 'data4', array: [0, 0] }
]
}
}
```
3. 在提交表单时,获取表格数据,并将其传给后台,例如:
```javascript
submitForm() {
const data = this.tableData.map(item => {
return {
col1: item.col1,
col2: item.col2,
array: item.array
}
})
this.$http.post('/api/save', { data })
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err)
})
}
```
在这里,我们将表格数据中的每一行都转换成一个对象,其中包含`col1`、`col2`和`array`三个属性,并将它们存储在一个数组中。然后,我们使用`$http.post`方法将数据发送给后台进行保存。
4. 在后台接口中,接收传递过来的数据,例如:
```javascript
app.post('/api/save', function(req, res) {
const data = req.body.data
console.log(data)
// TODO: 保存数据到数据库
res.send('OK')
})
```
在这里,我们使用`req.body`获取请求体中的数据,将其保存到`data`变量中,并在控制台中输出。然后,我们可以将数据保存到数据库中。最后,我们使用`res.send`方法向客户端返回`OK`表示保存成功。