vue+elementUI 表格操作按钮添加loading
前言
表格操作栏,某个操作需要异步请求才能做跳转等
方案
- 整个列表每行都加一个loading字段,不够优雅
- 利用$set方法 改变当前行当前按钮loading,可行(代码如下)
//按钮 row.loadingEdit
<ElButton type="text" :loading="row.loadingEdit" @click="handleEditor(row.id, row)" >编辑</ElButton> //
handleEditor(id,row){
this.$set(row, 'loadingEdit', true) //打开loading
.....
//异步结束关闭loading
this.$set(row, 'loadingEdit', false)
}效果图

结束,就是这样简单,你学废了吗?
vue+elementUI 表格操作按钮添加loading的更多相关文章
- vue+elementUI表格实现自定义右键菜单
组件代码: <template> <div id="contextmenu" class="contextmenu open"> < ...
- vue element-ui表格里时间戳转换成时间显示
工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...
- vue+elementUI表格列显示隐藏遇到bug
在最近的项目中,有需求要做到根据字段显示列,原来以为简单的v-if可以解决. 在开发的过程中遇到问题, <el-table ref="multipleTable" :data ...
- vue Element-ui 表格自带筛选框自定义高度
el-table中可以在一行的某列进行筛选,代码如下: <el-table-column prop="classOfTest" class="test" ...
- vue element-ui 表格筛选,点击筛选数据
<el-table-column prop="productEnvVersion" label="运行环境" :filters="this.ru ...
- vue+ElementUI——表格分页(前端实现方法)
1.使用ElementUI中的<el-table></el-table>和 <el-pagination></el-pagination>组件来实现 2 ...
- Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值
目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...
- vue Element-ui 表格多选 修改选中行背景色
实现的效果: 整体思路方式: 1.给获取到的数据添加自定义的className 2.在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className ...
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...
- vue+element-ui实现表格checkbox单选
公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...
随机推荐
- OpenType 字体文件组织结构
OpenType 字体文件结构 OpenType 字体的组织 https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organi ...
- 武装你的WEBAPI-OData使用Endpoint
本文属于 OData 系列文章 Introduction 更新: 由于新版的 OData 已经默认使用了 endpoint 模式(Microsoft.AspNetCore.OData 8.0.0),不 ...
- Qt编译数据库插件通用步骤说明
近期特意花了点时间,在之前数据库集成应用这个组件的基础上再次迭代完善,历经九九八十一难,将Qt的各种数据库插件,十几个Qt版本,全部编译一遍,同时打通了插件形式直连数据库和ODBC数据源连接方式,做过 ...
- [转]在MyBatis中使用pageHelper5.1.9分页插件实现物理分页
pagehelper的GIT地址:https://github.com/pagehelper/Mybatis-PageHelper/ 废话少说,直接给出中文官方链接: 1.如何使用分页插件 2.HOW ...
- 史上最通俗Netty入门长文:基本介绍、环境搭建、动手实战
原作者江成军,原题"还在被Java NIO虐?该试试Netty了",收录时有修订和改动. 1.阅读对象 本文适合对Netty一无所知的Java NIO网络编程新手阅读,为了做到这一 ...
- kubernetes系列(七) - Pod生命周期
目录 1. pod生命周期 2. initC 2.1 initC介绍 2.2 initC的作用 2.3 initC的模版 2.4 initC的一些其他补充 3. Pod健康性检查(liveiness) ...
- [LC814]二叉树剪枝
题目 题目地址 分析 这道题符合递归的性质,对于当前的节点node,当且仅当其左右孩子都为不包含1的子树,且node.val=1时,node所在的子树才符合"不包含1的子树"这一定 ...
- 重温CSS
入门 圆角 border-radius 阴影 box-shadow 元素边界 text-shadow 文字阴影 渐变 background-image属性新增的参数 linear-gradient 纵 ...
- Solution -「COCI 2009-2010」「洛谷 P8076」RESTORAN
\(\mathscr{Description}\) Link. 给定一个含 \(n\) 个点 \(m\) 条边的简单图, 求一种边二染色方案, 使得所有 \(\deg\ge2\) 的结点都邻接 ...
- Note -「Lagrange 反演」记笔习学
也许施工完成啦? 对于常数项为 \(0\),一次项非 \(0\) 的多项式 \(F,G\),定义复合运算 \(\circ\),满足 \[(F\circ G)(x)=F(G(x))=\sum_{ ...