一、解决思路
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)
    },
}

七、无需再vue的data中定义sendMsgLoading
八、成功效果图
在这里插入图片描述在这里插入图片描述

Logo

前往低代码交流专区

更多推荐