vue el-table的每行操作el-button添加单独的loading效果实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue el-table的每行操作el-button添加单独的loading效果实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

vue el-table的每行操作el-button添加单独的loading效果实现,vue.js,前端,javascript

实现代码

<tamplate>
   <el-table :data="list" >
       <el-table-column fixed="right" label="操作" align="left" width="220">
         <template slot-scope="scope">
           <!-- 主要设置:loading="scope.row.loading" -->
           <el-button
             type="text"
             plain
             size="small"
             :loading="scope.row.loading"
             @click="boxConfigSync(scope.row)"
           >同步</el-button>
         </template>
       </el-table-column>
     </el-table>
</tamplate>
<script>
     methods: {
	   // 获取列表
	    getPage() {
	      const self = this
	      self.$api.getXXXDevices(self.listQuery)
	        .then((response) => {
	          //主要设置
	          //给每一行数据添加loading属性，值设置为false
	          self.list = response.items.map(res=>{
	            this.$set(res, 'loading', false)
	            return res
	          });
	        })
	    },
	    boxConfigSync(row) {
	      const self = this
	      row.loading = true;//主要设置
	      self.$confirm('是否确定?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	      })
	        .then(() => {
	          this.$api.synXXXXNodes(row.id).then((response)=>{
	              if (response.success) {
	                self.$message({
	                  message: '成功！',
	                  type: 'success'
	                })
	                row.loading = false;//主要设置
	              } else {
	                row.loading = false;
	                self.$message({
	                  type: 'error',
	                  message: response.info//主要设置
	                })
	              }
	            }).catch(() => {
	              row.loading = false;//主要设置
	              this.$message({
	                title: "失败",
	                message: "失败",
	                type: "error",
	                duration: 2000
	              });
	            });
	        })
	        .catch(() => {
    	      row.loading = false;//主要设置
	          self.$message({
	            type: 'info',
	            message: '已取消'
	          })
	        })
	    },
	  }
</script>