element-ui给table里的每个按钮设置loading


先上效果图:

 说明:在table中,点击不同行的发送按钮,只有此行的按钮进行加载,请求后台成功后停止加载。

具体看代码(只有前台代码):





从代码可以看出,是给每一行的按钮都设置了一个加载的状态,而不是设置一个全局的变量。在请求前,设置此行的按钮为加载状态,在请求成功后取消加载。

需要注意的是,在进行网络请求中修改加载状态时,需先设置其初始值。否则不生效。设置初始值也就是在getList()方法时进行的,设置每行的loading默认初始值是false。这是因为在请求过程中修改状态时Vue不能检测到对象属性的添加或删除,就必须先给对象添加此属性,然后再去修改。

相关