vue+elementUI为table表格中每一个按钮单独设置loading，按钮loading互不影响（半转载，半本人测试补充）

110 阅读 0 评论 73 点赞

我是靠谱客的博主淡然舞蹈，最近开发中收集的这篇文章主要介绍vue+elementUI为table表格中每一个按钮单独设置loading，按钮loading互不影响（半转载，半本人测试补充），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、解决思路
data中设置一个btnLoading: false
缺点：点击一个按钮，列表里的按钮都会进入loading状态（不采用）
data中设置一个对象，里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,… }
缺点：不知道会列表里会有多少条数据（不采用，太傻了）
直接设置 v-loading=“scope.row.MarkUpPirceLoading”
可行，行动
二、行动
第一次尝试(直接贴代码)

 <el-table-column label="操作" align="center">
    <template slot-scope="scope">
        <el-input v-model="scope.row.sms" placeholder="请输入内容"/>
        <el-button v-loading="scope.row.sendMsgLoading" size="mini" type="primary" @click="clickSendSmsBtn(scope.row.id ,scope.row)">
        发送
        </el-button>
     </template>
 <el-table-column>

 // 发送消息
    clickSendSmsBtn(id, row) {
        row.sendMsgLoading = true
        sendMsgAPI({
            id,
            row.msg
        }).then(res => {
            row.sendMsgLoading = false
        }).catch(_ => {
            row.sendMsgLoading = false
        })
    },

第一次尝试失败，现象是发送成功后，loading还是一直再转，这里会发现一个很有趣的事情，就是通过【Vue.js devtools】这个谷歌插件，可以看到请求结束的时候，sendMsgLoading: false，这里我们就可以推出是不是vue没有监听到值的改变，所以视图不会更新，于是我去查了下文档，

官方的解释是
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

解决方案：
this.$set()

作者：爱扎马尾的小狮子
链接：https://www.jianshu.com/p/71b1807b1815
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

第二次尝试 -失败-
// 请求的时候赋值

   async getButlerAPI(accountId) {
      await getButler(accountId).then(res => {
        if (res.code === 200) {
          this.butlerList = res.data
          if (this.butlerList.length) {
            this.butlerList.map(item => {
              item.sendMsgLoading = false
              return item
            })
          }
        }
      })
    }

第三次尝试 -成功-
// 请求的时候赋值

async getButlerAPI(accountId) {
      await getButler(accountId).then(res => {
        if (res.code === 200) {
          this.butlerList = res.data
          if (this.butlerList.length) {
            this.butlerList.map(item => {
              this.$set(item, 'sendMsgLoading', false)
              return item
            })
          }
        }
      })
    }

三、成功后的效果图
效果
在这里插入图片描述
四、以上内容均为转载，如有侵权请联系速删。以下均为本人（
做你的猫miao）实践操作代码及效果图。
五、选取elementUI Table表格操作列

重点：v-loading="scope.row.sendMsgLoading"

<el-table-column label="操作" min-width="100">
      <template slot-scope="scope">
        <el-button
          size="mini"
          v-loading="scope.row.sendMsgLoading"
           @click="clickSendSmsBtn(scope.row.id ,scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
</el-table-column>

六、在方法中控制loading开始和结束，此处setTimeout用于模拟异步请求

methods: {
// 局部loading
    clickSendSmsBtn (id, row) {
      this.$set(row, 'sendMsgLoading', true)
      setTimeout(() => {
        this.$set(row, 'sendMsgLoading', false)
      }, 5000)
    },
}