本文章目标:点击删除图标实现对应数据删除
实现步骤如下:
一:将服务器端获取数据中数据id值绑定到删除图标(重点)
即在渲染时,利用自定义属性,为td设置id值
<td data-id = "${ele.id}">
<i class="bi bi-pencil-square edit"></i>
<i class="bi bi-trash3 del"></i>
</td>
二:利用事件委托,绑定点击事件,并获取文章id
三:向服务器传递数据
document.querySelector('.art-list').addEventListener('click', async (e) => {
if (e.target.classList.contains('del')) {
const delId = e.target.parentNode.dataset.id
console.log(delId);
const res = await axios({
url: `/v1_0/mp/articles/${delId}`,
method: 'delete'
})
console.log(res);
getArtileList()
}
})
四:删除最后一条,实现列表页跳转
const children = document.querySelector('.art-list').children
//根据向服务器请求的那样,会请求当前的数据条数
console.log(children);
if (children.length === 1 && searchUrl.page !== 1) {
searchUrl.page--
document.querySelector('.page-now').innerHTML = `第${searchUrl.page}页`
getArtileList()
}
。。。先这样吧,今天学累了。明天再详细整理一下这篇文档