处理element ui 表格中 按钮 loading问题

想要给表格中的按钮添加loading,但是一个按钮定义一个loading又不现实。

想到的解决方法如下,不完美,但能用。


遍历表格数据添加loading属性

// 添加loading
        this.tableList.forEach((item, index) => {
          item.loading = false
        })

给表格中按钮添加loading 

<el-button
                        type="primary"
                        plain
                        size="mini"                                            
                        :loading="scope.row.loading"
                        @click="handle(scope.$index, scope.row)">按钮</el-button>

 点击按钮后,重新赋值loading

handle(index, row){
      row.loading = true

      // 处理loading不生效,这段代码必须添加,否则 row.loading = true 不生效,原因未知
      let tn = row.taskName
      row.taskName = ''
      row.taskName = tn
}

Element Plus 的 `v-loading` 功能用于显示加载状态,通常当你请求数据时会在组件上显示一个加载动画。如果你发现它并没有正常显示,可能是以下几个原因: 1. **组件嵌套层级问题**:确保 `v-loading` 组件是在需要等待数据的地方,比如列表、表格的滚动区域上方,或者某个按钮触发操作后。 ```html <template> <div> <button @click="handleLoadData">点击加载数据</button> <el-dialog v-model="dialogVisible" :show-loading="isLoading"> <!-- 加载内容 --> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, isLoading: false, }; }, methods: { handleLoadData() { this.isLoading = true; // 开始加载前设置isLoading为true setTimeout(() => { // 模拟异步加载数据 this.isLoading = false; // 数据加载完毕后设置isLoading为false this.dialogVisible = true; // 显示对话框 }, 2000); }, }, }; </script> ``` 2. **样式覆盖**:确认是否有其他CSS样式阻止了加载指示器的显示。例如,给 `el-dialog` 设置了高度为0或其他隐藏样式可能会导致 `v-loading` 无效。 3. **版本问题**:检查 Element Plus 是否是最新的版本,有时候老版本可能存在一些已知的问题。更新到最新版并查看是否修复。 4. **错误处理**:检查数据请求是否有任何错误,如果请求失败而没有适当地处理,`v-loading` 也不会显示。 如果以上都排查过还是无法解决,你可以提供更多的代码片段以便于更准确地定位问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值