一显示效果
二、代码
全部粘贴上去即可
<template>
<div>
<el-button @click="addRow">添加行</el-button>
<el-button @click="saveAll" type="primary" style="margin-left: 10px">保存全部</el-button>
<el-table :data="tableData" :empty-text="'没有数据'" size="mini" style="width: 600px">
<el-table-column prop="date" label="日期" width="180">
<template slot-scope="scope">
<el-input
v-model="scope.row.date"
placeholder="请输入日期"
v-show="scope.row.editing"
></el-input>
<span v-show="!scope.row.editing">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
placeholder="请输入姓名"
v-show="scope.row.editing"
></el-input>
<span v-show="!scope.row.editing">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="food" label="食物">
<template slot-scope="scope">
<el-select
v-model="scope.row.food"
placeholder="请选择食物"
v-show="scope.row.editing"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<span v-show="!scope.row.editing">{{ scope.row.food }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button
v-if="!scope.row.editing"
@click="startEditing(scope.row)"
type="text"
size="small"
>
编辑
</el-button>
<el-button
v-else
@click="save(scope.row)"
type="text"
size="small"
>
保存
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
options: [
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'orange', label: '橙子' }
]
};
},
methods: {
addRow() {
const newRow = {
date: '',
name: '',
food: '',
editing: true
};
this.tableData.push(newRow);
},
startEditing(row) {
row.editing = true;
},
save(row) {
row.editing = false;
},
saveAll() {
this.tableData.forEach(row => {
row.editing = false;
});
// const payload = this.tableData.map(row => ({
// date: row.date,
// name: row.name,
// food: row.food
// }));
// 发送POST请求到后端API端点
// axios.post('/api/save-data', payload)
// .then(response => {
// // 根据后端的响应进行相应的处理
// console.log(response.data); // 可以打印响应结果或做其他处理
// })
// .catch(error => {
// // 处理请求错误
// console.error(error);
// });
}
}
};
</script>