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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉搜索树再升级——红黑树

二叉搜索树再升级——红黑树 红黑树的概念红黑树的插入uncle为granfather的右孩子uncle结点为红色uncle结点为空或黑色 uncle为granfather的左孩子 红黑树的概念 之前我们学习了AVL树&#xff0c;这是一种判断左右子树高度来严格控制总体树的高度的树。条件相对来说比较苛刻。…

力扣OJ题讲解——循环队列

今天我们一起来做一道关于队列的OJ题目&#xff0c;这是力扣题目622题&#xff0c;点击题目链接可以直接跳转&#xff0c;https://leetcode.cn/problems/design-circular-queue/ 首先&#xff0c;我们看到要求&#xff0c;需要我们实现哪些功能&#xff1f; 我们需要设置队列长…

一起学docker系列之七docker容器卷技术

目录 1 为什么使用容器数据卷&#xff1f;2 数据卷的特点和优势3 使用数据卷的方法3.1 创建容器并挂载数据卷3.2 容器间数据卷的共享与继承 4 数据卷的权限设置5 注意事项5.1 解决权限问题5.2 路径自动创建 结语 对于容器化应用程序的数据管理和持久化&#xff0c;Docker 数据卷…

酷开科技 | 大胆解锁酷开系统,收获绝佳观影体验

在当今数字化时代&#xff0c;家庭娱乐的方式越来越多样化。其中&#xff0c;看电影无疑是很受欢迎的一种。而酷开科技&#xff0c;作为一家专注于智能电视领域的科技公司&#xff0c;其自主研发的智能电视操作系统——酷开系统&#xff0c;就在看电影方面为消费者带来了更精彩…

Linux反弹SHell与检测思路

免责声明 文章仅做经验分享用途,利用本文章所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任,一旦造成后果请自行承担!!! 反弹shell payload在线生成 https://www.chinabaiker.com/Hack-Tools/ Online - Reverse Shell G…

Qt 软件开发框架(主要几个部分)

目录 1、 一个软件基本要素 &#xff08;1&#xff09;UI模块 &#xff08;2&#xff09;网络模块 &#xff08;3&#xff09;业务逻辑模块 &#xff08;4&#xff09;中间层 &#xff08;5&#xff09;独立模块&#xff08;守护进程、更新模块、日志收集模块…&#xff…

梦开始的地方——Adobe Premiere Pro

今天&#xff0c;我们来说说一款老生常谈的相信也是很多人都经常迫切需要的软件。Adobe Premiere Pro&#xff0c;简称Pr&#xff0c;是由Adobe公司开发的一款视频编辑软件。 Premiere Pro是视频编辑爱好者和专业人士必不可少的视频编辑工具。它可以提升您的创作能力和创作自由…

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

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

virtualList 封装使用 虚拟列表 列表优化

虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装 本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面 <template><div> <el-select transfer"true" :popper-append-to-body"true"popper-class…

第十七章:数据库操作

数据库基础 SQL语言 1、select 语句 select 语句用于从数据中检索数据。语法如下&#xff1a; SELECT 搜选字段列表 FROM 数据表名 WHERE 条件表达式 GROUP BY 字段名 HAVING 条件表达式(指定分组的条件) ORDER BY 字段名[ASC|DESC] 2、insert 语句 insert 语句用于向表中插入…

[UE4][C++]基于UUserWidget的一种序列图播放方法

最近在做一个大项目&#xff0c;鸽了几个月了....... 一、传统方法Flipbook 这种方法适合序列图较少的情况下、可以一个一个添加进来然后调整顺序。蓝图也比较友好可以直接设置很多属性和功能。这里简单了解一下即可&#xff0c;想要深入了解的同学可以自行搜索。 1.1创建Fli…

数据库数据恢复—SQLserver数据库中勒索病毒被加密的数据恢复案例

SQLserver数据库数据恢复环境&故障&#xff1a; 一台服务器上的SQLserver数据库被勒索病毒加密&#xff0c;无法正常使用。该服务器上部署有多个SQLserver数据库&#xff0c;其中有2个数据库及备份文件被加密&#xff0c;文件名被篡改&#xff0c;数据库无法使用。 SQL se…