element-ui给table里的每个按钮设置loading
先上效果图:
说明:在table中,点击不同行的发送按钮,只有此行的按钮进行加载,请求后台成功后停止加载。
具体看代码(只有前台代码):
"userList" border fit class="user_table"> "姓名" prop="chinaName" align="center"> "电话" prop="phone" align="center"> "操 作" align="center"> "scope"> class="scope_inline">"scope.row.msg" placeholder="请输入消息" /> "primary" size="mini" :loading="scope.row.loading" @click="sendMsg(scope.row)">发送
从代码可以看出,是给每一行的按钮都设置了一个加载的状态,而不是设置一个全局的变量。在请求前,设置此行的按钮为加载状态,在请求成功后取消加载。
需要注意的是,在进行网络请求中修改加载状态时,需先设置其初始值。否则不生效。设置初始值也就是在getList()方法时进行的,设置每行的loading默认初始值是false。这是因为在请求过程中修改状态时Vue不能检测到对象属性的添加或删除,就必须先给对象添加此属性,然后再去修改。