vue在删除列表后，如何更新列表？

Question

我用delete请求把id传给后台。

假如我删的是BD，删除后列表是不刷新的，只有按下F5才能看到BD被删了。

这样用户体验肯定不好

怎样才能解决这个问题？

del:function(current_id){       
    axios.delete('/role/delete',{
        headers: {
            Authorization : getCookie('token') 
        },
        params:{
            id:current_id
        }
    })
    .then( res =>{
        console.log(res);
        if(res.data.status == 1){
            layer.msg('删除成功',{time:1500});
        }
        else{
            layer.msg('删除失败',{time:1500});
        }
    })
}

Answer 1

对于前端优化尽可能的少调用接口，所以建议你还是直接通过变异方法删除数据吧!
写个伪代码

v-for="(item, index)" in dataList 
<div @delete(index)></div>
methods: {
    delete(index) {
        this.data.splice(index,1)
    }
}

Answer 2

1.你的页面进来的时候肯定有个拉取数据的方法吧，删除成功之后调用一下那个方法，数据不就刷新了么
2.如果你不想重新请求数据，那么直接操作table的数据源，data.splice(index, 1)

Answer 3

建议重新获取下列表数据即可。

Answer 4

补充楼上, 你可以在获取后台删除成功的反馈后, 直接更新table数据

 .then( res =>{
        console.log(res);
        if(res.data.status == 1){
            layer.msg('删除成功',{time:1500});
            // 在此处 tableData.splice(index, 1)
        }
        else{
            layer.msg('删除失败',{time:1500});
        }
    })

Answer 5

删除成功后，重新请求数据，（注意查询条件）