Element-UI 中 loading 的使用

表格加载

 <el-table

                :data="tableData"

                row-key="target_id"

                v-loading="loading"

                element-loading-text="小主别急"

                border

            >

async getAllIndicatorNameList() {

            this.loading = true

            const result = await getAllIndicatorNameList(this.user_id,this.type,this.inputValue);

            this.tableData = [];

            let tempData = [];

            if (result) {

                this.loading = false;  

                if (result.MSGCODE == '007') {

                    tempData = result.RESULT;

                    tempData.map((item,index,array)=>{

                        this.tableData.push({"type_name":this.typeName,"target_id":item.TARGET_INST_ID, "target_name":item.TARGET_INST_NAME, "status":item.STATUS,"target_donc":item.TARGET_INST_DONC});

                    });

                }

            } else {

            Toast('服务器异常')

            this.loading = false;

           } 

        }

全屏加载

async updateIndicatorNameList() {

            const loading = this.$loading({

                lock: true,//lock的修改符--默认是false

                text: '小主别急',//显示在加载图标下方的加载文案

                // background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色

                target: document.body//loadin覆盖的dom元素节点

            });

            const result = await updateIndicatorNameList(this.user_id,this.type,this.submitData);

            if (result) {

                //成功回调函数停止加载

                loading.close()

                if (result.MSGCODE == '007') {

                    // Toast('操作成功');

                    this.$router.push({path:"/localIndicators"});

                }

            } else {

            Toast('服务器异常')

            loading.close()

           } 

        }