zoukankan      html  css  js  c++  java
  • element-ui给table里的每个按钮设置loading

    先上效果图:

     说明:在table中,点击不同行的发送按钮,只有此行的按钮进行加载,请求后台成功后停止加载。

    具体看代码(只有前台代码):

    <template>
        <el-table :data="userList" border fit class="user_table">
            <el-table-column label="姓名" prop="chinaName" align="center"></el-table-column>
            <el-table-column label="电话" prop="phone" align="center"></el-table-column>
            <el-table-column label="操 作" align="center">
                <template slot-scope="scope">
                    <div class="scope_inline">
                    <el-input v-model="scope.row.msg" placeholder="请输入消息" />
                    <el-button type="primary" size="mini" :loading="scope.row.loading" @click="sendMsg(scope.row)">发送
                    </el-button>
                </div>
                </template>
            </el-table-column>
        </el-table>
    </template>
    
    <script>
        import { user } from '@/api/user'
        export default {
            data() {
                return {
                    userList: []
                }
            },
            created() {
                this.getList()
            },
            methods: {
                //查询用户列表
                getList() {
                    user.getList().then(res => {
                        this.userList = res.data
                        this.userList.map(item => {
                            //添加属性,设置默认值
                            this.$set(item, 'loading', false)
                            return item
                        })
                    }, err => {
                        console.log(err)
                    })
                },
                //发送消息
                sendMsg(row) {
                    row.loading = true
                    user.sendMsg({
                        id: row.id,
                        msg: row.msg
                    }).then(res => {
                        if (res.code == 200) {
                            row.loading = false
                        }
                    }, err => {
                        console.log(err)
                    })
                }
            },
    
        }
    
    </script>
    
    <style scoped>
        .user_table{
             800px;
        }
        .scope_inline{
            display: flex;
        }
    </style>

    从代码可以看出,是给每一行的按钮都设置了一个加载的状态,而不是设置一个全局的变量。在请求前,设置此行的按钮为加载状态,在请求成功后取消加载。

    需要注意的是,在进行网络请求中修改加载状态时,需先设置其初始值。否则不生效。设置初始值也就是在getList()方法时进行的,设置每行的loading默认初始值是false。这是因为在请求过程中修改状态时Vue不能检测到对象属性的添加或删除,就必须先给对象添加此属性,然后再去修改。

    就是这么简单,你学废了吗?感觉有用的话,给笔者点个赞吧 !
  • 相关阅读:
    hibernate篇章六--demo(Hibernate之第1解之-hibernate_demo_1)
    hibernate篇章六--demo(0.准备工作)
    博客装扮3-博客园界面装扮优化教程
    java学习笔记--1_常见输入输出语句熟悉篇章
    矩阵相乘问题
    Algorithm
    hibernate篇章五--Hibernage工作原理
    hibernate篇章四-- Hibernate配置文件中hiberante.hbm2ddl.auto四个参数的配置
    hibernate篇章三-- hibernate配置文件hibernate.cfg.xml的详细解释
    hibernate篇章二--成就搭建hibernate框架
  • 原文地址:https://www.cnblogs.com/zys2019/p/14978568.html
Copyright © 2011-2022 走看看