当前位置: 首页 > news >正文

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;},},
}

在这里插入图片描述

相关文章:

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

自定义指令v-loading&#xff0c;只需要绑定Boolean即可 v-loading“loading” <el-table :data"list" border style"width: 100%" v-loading"loading"><el-table-column align"center" label"序号" width"5…...

磁盘清理在哪里?学会这4个方法,快速清理内存!

“在使用电脑的过程中&#xff0c;我可能经常会保存一些文件到电脑上&#xff0c;这也导致电脑经常出现内存不足的情况。我想问问磁盘清理在哪里呀&#xff1f;我应该如何打开呢&#xff1f;” 随着使用电脑的时间增长&#xff0c;用户可能经常会遇到磁盘空间不足的情况&#x…...

Error opening terminal: xterm.”的解决方法

主要是看下面这两个变量是否设置正确 $ echo $TERM $ echo $TERMINFO 通常TERM的默认值为xterm-265color, 要查看支持的term&#xff0c;可以ls -al /lib/terminfo/x/ 如果TERM是xterm-265color的话&#xff0c;TERMINFO设置为/usr/lib/terminfo make menuconfig时提示“Err…...

C#常见的设计模式-结构型模式

引言 设计模式是软件工程中用于解决常见问题的可复用解决方案。在C#编程中&#xff0c;常见的设计模式具有广泛的应用。本篇博客将重点介绍C#中常见的结构型设计模式&#xff0c;包括适配器模式、装饰器模式、代理模式、组合模式和享元模式。 目录 引言1. 适配器模式(Adapter …...

Redis分片备库切换操作

Redis分片备库切换操作 场景描述&#xff1a; 分片集群&#xff1a; 1.ipa:5001-ipa:5002 2.ipb:5001-ipb:5002 需将两个分片备库互置完成灾备 操作步骤 准备工作 主机密码&#xff1a;1qaz!QAZ 获取节点信息命令 /redispath/bin/redis-cli -a password -h ip -p port red…...

二叉树:leetcode1457. 二叉树中的伪回文路径

给你一棵二叉树&#xff0c;每个节点的值为 1 到 9 。我们称二叉树中的一条路径是 「伪回文」的&#xff0c;当它满足&#xff1a;路径经过的所有节点值的排列中&#xff0c;存在一个回文序列。 请你返回从根到叶子节点的所有路径中 伪回文 路径的数目。 给定二叉树的节点数目…...

【【Linux下的Petallinux 以及其他的配置】】

Linux下的Petallinux 以及其他的配置 sudo apt-get install iproute2 gawk python3 python build-essential gcc git make net-tools libncurses5-dev tftpd zlib1g-dev libssl-dev flex bison libselinux1 gnupg wget git-core diffstat chrpath socat xterm autoconf libtoo…...

13、深度学习之神经网络

深度学习是机器学习中重要的一个学科分支,它的特点就在于需要构建多层“深度”的神经网络。 人们在探索人工智能初期,就曾设想构建一个用数学方式来表达的模型,它可以模拟人的大脑,大脑我们都知道,有很多神经元,每个神经元之间通过突触链接。 神经网络的设计就是模仿了这…...

js的数组去重方法

目录 es6数组中对象去重 1. filter()用法 2. findIndex()用法 3. 去重 其他方法&#xff1a; 方法二&#xff1a;reduce()去重 1. reduce()用法 1.1 找出字符长度最长的数组成员。 1.2 扁平化二维数组 1.3 扁平化多维数组 三、总结方案&#xff1a; 使用Set&#xf…...

在 Next 14 的 appRouter 模式中接入 React-Redux

在 Next 14 的 appRouter 模式中接入 React-Redux 说明 Next.js 版本升级到 14 后&#xff0c;相比 13 版本是一个改动很大的大版本升级&#xff0c;很多概念或者使用方式 13 版本都有较大的区别&#xff0c;因此这里记录一些学习 14 版本的 Next.js 的心得体会或者问题。因为…...

aspose-words 跳过证书验证jar

优先用 aspose-words-19.3.jar &#xff0c;不需要读取license.xml&#xff0c;导出后直接水印&#xff0c;jar包最好直接放在项目resource目录下直接引用&#xff0c;要不下载不下来 public static String doc2pdf(String fileName, String filePath) {try {String oldFile f…...

【开题报告】基于uniapp的瑜伽学习交流小程序的设计与实现

1.选题背景 瑜伽在现代社会中越来越受到人们的关注和喜爱。它不仅可以帮助人们塑造健美的身材&#xff0c;还能促进身心健康、提高生活质量。然而&#xff0c;由于瑜伽动作的复杂性和技巧性&#xff0c;很多初学者在学习过程中会遇到困难和挑战。 同时&#xff0c;由于工作和…...

【蓝桥杯单片机】应用手势传感器(串口2)

手势传感器:串口通信,可以识别左滑、右滑、单击三种手势,输出相应的固定串口数据。 控制器:IAP15F2K61S2单片机。 引脚连接: 单片机 手势传感器 P46 -> TX P47 -> RX VCC -> 5V GND->gnd main.c 程序说明:传感器与单片机的串口2进行数据交互,这里使用的是开…...

51单片机蜂鸣器发出悦耳的声音

51单片机蜂鸣器发出悦耳的声音 1.概述 这篇文章介绍单片机控制蜂鸣器入门小实验&#xff0c;通过该实验掌握蜂鸣器发声的原理&#xff0c;控制声音发出我们想听的音乐。 2.蜂鸣器发声 2.1.硬件原理 1.蜂鸣器正极接单片机20号引脚VCC&#xff0c;负极接19号引脚P1.7 2.20MH…...

Web3.0时代:区块链DAPP将如何颠覆传统模式

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随着…...

JAVA 算法面试总结

1、二分查找 二分查找又叫折半查找&#xff0c;要求待查找的序列有序。每次取中间位置的值与待查关键字比较&#xff0c;如果中间位置 的值比待查关键字大&#xff0c;则在前半部分循环这个查找的过程&#xff0c;如果中间位置的值比待查关键字小&#xff0c; 则在后半部分循环…...

【Docker】安装MySQL 通俗易懂 亲测没有任何问题

目录 1.拉取镜像 2.运行容器 3.创建mysql配置文件 4.测试 1.拉取镜像 dockerhub官网&#xff1a;Docker 如果需要其他版本mysql docker pull mysql:xxx&#xff08;版本&#xff09; docker pull mysql #默认拉取最新版本 latest 2.运行容器 docker run -d -p 3306:33…...

【React】打包优化-配置CDN

CDN 是一种内容分发网络服务&#xff0c;当用户请求网站内容时&#xff0c;由离用户最近的服务器将缓存的资源内容传递给用户。 哪些资源可以放到CDN服务器&#xff1f;&#xff08;比如react、 react-dom&#xff09; 体积较大&#xff0c;需要利用CDN文件在浏览器的缓存特性…...

上手 Promethus - 开源监控、报警工具包

名词解释 Promethus 是什么 开源的【系统监控和警报】工具包 专注于&#xff1a; 1&#xff09;可靠的实时监控 2&#xff09;收集时间序列数据 3&#xff09;提供强大的查询语言&#xff08;PromQL&#xff09;&#xff0c;用于分析这些数据 功能&#xff1a; 1&#xff0…...

Linux学习教程(第十二章 Linux系统管理)三

第十二章 Linux系统管理&#xff08;进程管理、工作管理和系统定时任务&#xff09;&#xff08;三&#xff09; 十九、Linux 定时执行任务&#xff08;at命令&#xff09; Linux at命令详解&#xff1a;定时执行任务 要想使用 at 命令&#xff0c;读者需提前安装好 at 软件…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...