表格中的某一行按钮选中调新增接口,取消选中调删除接口,并且浏览器关闭后仍保留按钮选中状态
时间: 2024-02-26 09:59:31 浏览: 67
表格的添加,全选,删除
要实现表格中的某一行按钮选中调新增接口,取消选中调删除接口,并且浏览器关闭后仍保留按钮选中状态,你可以使用以下步骤:
1. 在表格中添加一个列来显示按钮,并为每个按钮添加一个唯一的ID属性,用于标识该按钮的状态。
2. 在Vue组件的data中定义一个数组,用于保存选中的按钮的ID。
3. 在按钮的点击事件中,根据按钮的ID来判断该按钮的状态,并执行相应的操作。如果按钮的ID已经在选中的数组中,表示该按钮已被选中,则执行删除操作;如果按钮的ID不在选中的数组中,则执行新增操作。
4. 在Vue组件的`created`生命周期钩子函数中,使用`localStorage`或者`sessionStorage`来保存选中的按钮的ID数组,使得在浏览器关闭后仍能够保留按钮选中状态。
下面是一个示例代码:
```
<template>
<table>
<thead>
<tr>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>
<button :id="'btn-' + item.id"
:class="{ active: selectedButtons.includes('btn-' + item.id) }"
@click="toggleButton('btn-' + item.id)">
{{ selectedButtons.includes('btn-' + item.id) ? '取消选中' : '选中' }}
</button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' }
],
selectedButtons: []
}
},
created() {
// 从本地存储中恢复选中的按钮
const selectedButtons = JSON.parse(localStorage.getItem('selectedButtons'))
if (selectedButtons) {
this.selectedButtons = selectedButtons
}
},
methods: {
toggleButton(id) {
if (this.selectedButtons.includes(id)) {
// 取消选中
const index = this.selectedButtons.indexOf(id)
this.selectedButtons.splice(index, 1)
// 执行删除操作
this.deleteItem(id)
} else {
// 选中
this.selectedButtons.push(id)
// 执行新增操作
this.addItem(id)
}
// 保存选中的按钮到本地存储中
localStorage.setItem('selectedButtons', JSON.stringify(this.selectedButtons))
},
addItem(id) {
// TODO: 执行新增操作
},
deleteItem(id) {
// TODO: 执行删除操作
}
}
}
</script>
<style>
.active {
background-color: #ccc;
}
</style>
```
在上面的代码中,我们循环了一个包含三个项目的数组`items`,并为每个项目添加了一个按钮,按钮的ID根据项目的ID来生成。在按钮的点击事件中,我们根据按钮的ID来判断该按钮的状态,并执行相应的操作。在Vue组件的`created`生命周期钩子函数中,我们从本地存储中恢复选中的按钮。最后,我们使用CSS来定义选中按钮的样式。
阅读全文