PC端页面进去先出现加载效果

自定义指令v-loading,只需要绑定Boolean即可
v-loading=“loading”

<el-table :data="list" border style="width: 100%" v-loading="loading">
        <el-table-column align="center" label="序号" width="50">
        </el-table-column>
        <el-table-column align="center" prop="name" label="角色" width="200">
        </el-table-column>
        <el-table-column align="center" prop="state" label="启用" width="200">
          <template v-slot="{ row }">
            <span style="margin-left: 10px">
              {{
                row.state === 1 ? "已启用" : row.state === 0 ? "未启用" : "无"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template>
            <el-button size="mini" type="text">分配权限</el-button>
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

loading: false,默认为false

export default {
  data() {
    return {
      loading: false, //默认加载为false
      }
   }methods: {
    async getRoleList() {
     //刚进来开启loading加载
      this.loading = true;
      const { rows, total } = await getRoleList(this.pageParams);
      this.list = rows;
      this.pageParams.total = total;
      //等待接口获取到数据,关闭加载
      this.loading = false;
    },
  },
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/180089.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java--static修饰成员变量

1.static 叫静态&#xff0c;可以修饰成员变量、成员方法。 2.成员变量按照有无static修饰&#xff0c;分为两种&#xff1a; ①类变量&#xff1a;有static修饰&#xff0c;属于类&#xff0c;在计算机里只有一份&#xff0c;会被类的全部对象共享(不管那个类调用的&#x…

脸爱云一脸通智慧管理平台未授权访问

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、漏洞概述 脸爱云一脸通智慧管理平台存在严重漏洞&#xff0c;允许…

数据结构与算法编程题13

设计算法将一个带头结点的单链表A分解为两个具有相同结构的链表B、C&#xff0c;其中B表的结点为A表中值小于零的结点&#xff0c;而C表的结点为A表中值大于零的结点&#xff08;链表A中的元素为非零整数&#xff0c;要求B、C表利用A表的结点&#xff09; for example: A -1 2 …

企业软件定制开发有哪些优势?|app小程序网站搭建

企业软件定制开发有哪些优势&#xff1f;|app小程序网站搭建 企业软件定制开发是一种根据企业特定需求开发定制化软件的服务。相比于购买现成的软件产品&#xff0c;企业软件定制开发具有许多优势。 首先&#xff0c;企业软件定制开发可以满足企业独特需求。每个企业都有自己独…

C++基础从0到1入门编程(四)类和对象

系统学习C 方便自己日后复习&#xff0c;错误的地方希望积极指正 往期文章&#xff1a; C基础从0到1入门编程&#xff08;一&#xff09; C基础从0到1入门编程&#xff08;二&#xff09; C基础从0到1入门编程&#xff08;三&#xff09; 参考视频&#xff1a; 1.黑马程序员匠心…

OpenGL YUV 和 RGB 图像相互转换出现的偏色问题怎么解决?

未经作者(微信ID:Byte-Flow)允许,禁止转载 文章首发于公众号:字节流动 早上知识星球里的一位同学,遇到 yuv2rgb 偏色问题,这个问题比较典型,今天展开说一下。 省流版 首先 yuv2rgb 和 rgb2yuv 之间的转换要基于相同的标准,转换使用不同的标准肯定会引起偏色,常见的…

Leetcode1410. HTML 实体解析器

Every day a Leetcode 题目来源&#xff1a;1410. HTML 实体解析器 解法1&#xff1a;模拟 遍历字符串 text&#xff0c;每次遇到 ’&‘&#xff0c;就判断以下情况&#xff1a; 双引号&#xff1a;字符实体为 &quot; &#xff0c;对应的字符是 " 。单引号&a…

技术短视频账号矩阵seo系统--源头开发---saas工具

专注短视频账号矩阵系统源头开发---saas营销化工具&#xff0c;目前我们作为一家纯技术开发团队目前已经专注打磨开发这套系统企业版/线下版两个版本的saas营销拓客工具已经3年了&#xff0c;本套系统逻辑主要是从ai智能批量剪辑、账号矩阵全托管发布、私信触单收录、文案ai智能…

el-table表格排序(需要后端判别),el-table导出功能(向后端发送请求)

&#xff08;1&#xff09;表格排序 &#xff08;2&#xff09;简单的table导出功能&#xff08;需要后台支撑&#xff09;必须要有iframe &#xff08;3&#xff09;页面所有代码&#xff1a; <template><div class"mainContainer"><el-form:model&…

护眼台灯怎么样选择?口碑最好的五款护眼台灯推荐

7月13日&#xff0c;国家卫生健康委疾控局公布了一项覆盖了全国8604所学校&#xff0c;247.7万名学生的近视专项调查结果。结果显示&#xff0c;2020年&#xff0c;我国儿童青少年总体近视率为52.7%&#xff1b;其中6岁儿童为14.3%&#xff0c;小学生为35.6%&#xff0c;初中生…

Find My按摩仪|苹果Find My技术与按摩仪结合,智能防丢,全球定位

工作生活中&#xff0c;颈椎总会经常不舒服&#xff0c;尤其像我们这种低头族&#xff0c;上班用电脑&#xff0c;下班玩手机&#xff0c;每天的颈椎保持一个状态而得不到休息&#xff0c;从而让我们的颈椎不舒服&#xff0c;患上了颈椎病。颈椎僵硬&#xff0c;肌肉紧张&#…

win10底部任务栏无响应?试试这些方法!

win10的任务栏是一个关键的用户界面元素&#xff0c;允许您轻松访问应用程序和系统功能。然而&#xff0c;有时您可能会遇到win10底部任务栏无响应的问题&#xff0c;这会妨碍您的工作流程。本篇文章将介绍解决win 10底部任务栏无响应的问题的三种方法&#xff0c;每种方法都会…

比例减压阀放大器选型

控制阀型如比例插装阀、比例方向阀、比例压力阀、比例流量阀、比例叠加阀等&#xff0c;安装方式有插式及导轨卡槽式&#xff0c;输入指令可选0-10V、4-20mA、10V、0-5V&#xff0c;输出电流可选最大3A&#xff0c;适用各大品牌不带电反馈常规比例阀匹配度&#xff0c;控制比例…

Android项目更新依赖和打包步骤和问题汇总

目录 1、Android 项目打包&#xff0c;32位包升级到64位包问题一&#xff1a;ERROR: Conflicting configuration : armeabi-v7a,x86-64,arm64-v8a,x86 in ndk abiFilters cannot be present when splits abi filters are set : x86,armeabi-v7a,arm64-v8a 2、Android项目依赖升…

ubuntu22.04 git 安装

安装git&#xff1a;默认情况下&#xff0c;Git 在 ubuntu 22.04 基础存储库中可用。 现在运行以下命令在您的 Ubuntu 系统上安装最新版本的 Git&#xff1a; 查看当前版本号 git --version

第二证券:买国债逆回购的5个技巧?国债逆回购有什么技巧?

买国债逆回购存在以下五个技巧&#xff1a; 1、在周四买一天期的国债逆回购 出资者在周四购买1天期的国债逆回购&#xff0c;实践收益会按3天核算&#xff0c;一同&#xff0c;资金在周五依然可用于出资并获取收益。 2、节假日前买国债逆回购 国债逆回购收益率跟商场的资金…

Flink CDC -Sqlserver to Sqlserver java 模版编写

1.基本环境 <flink.version>1.17.0</flink.version> 2. 类文件 package com.flink.tablesql;import org.apache.commons.io.FileUtils; import org.apache.commons.lang3.StringUtils; import org.apache.flink.streaming.api.environment.StreamExecutionEnviro…

oracle数据库巡检常见脚本-系列二

简介 作为数据库管理员&#xff08;DBA&#xff09;&#xff0c;定期进行数据库的日常巡检是非常重要的。以下是一些原因&#xff1a; 保证系统的稳定性&#xff1a;通过定期巡检&#xff0c;DBA可以发现并及时解决可能导致系统不稳定的问题&#xff0c;如性能瓶颈、资源利用率…

MEMS制造的基本工艺——晶圆键合工艺

晶圆键合是一种晶圆级封装技术&#xff0c;用于制造微机电系统 (MEMS)、纳米机电系统 (NEMS)、微电子学和光电子学&#xff0c;确保机械稳定和气密密封。用于 MEMS/NEMS 的晶圆直径范围为 100 毫米至 200 毫米&#xff08;4 英寸至 8 英寸&#xff09;&#xff0c;用于生产微电…