element-ui实现表格单选的功能

88f3af7f50c3eb33ed9c0c05fe6525bc.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

现在是:2022年4月20日13:33:23

需求是这样的:用户单击购买产品的按钮时,会出现一个产品的列表,但是呢只能买一种产品,暂时不可以多选。效果如下所示:

c0c99446c12f0b3073bc3499fca77240.png

原来做的是,单击前面的单选按钮,后面的数量表单放开禁用,可以选择和填写;现在需要改成,直接点击某一行,则改行自动选中,当然数量表单也放开可供用户直接输入和填写。

实现方法

框架原来用的是avue写的,这个框架,确实好用,可以提高开发效率,很少的代码实现很多的功能,但这也是个缺点,代码是少了,实现的功能也确实多,不过你要单个实现某个子功能?那可真的是太难为了……

avue也有表格的单选功能,还有例子呢,只是我加上之后没有效果。。。不知道是我代码的问题还是官方已经不支持了,不想在去研究了,直接换成了element ui去实现了。

html代码:

<div style="margin:-20px 20px 20px 0;line-height: 40px;float: right"><span style="font-size: 18px;color:#303133">当前余额:</span><span style="font-size: 18px;color:#F56C6C">¥{{currentBalance}}</span></div><el-tableref="cruds":query="query":data="cardData"highlight-current-row@row-click="cardRowClick"@current-change="handleCurrentChange"><el-table-column label="选择" width="80"><template slot-scope="{ row }"><el-radio :label="row.code" v-model="cardForm.code" @change="cardRadionChange(row)"><span></span></el-radio></template></el-table-column><el-table-column label="类型" align="center" prop="typeName" /><el-table-column label="名称" align="center" prop="name" /><el-table-column label="单价(元)" align="center" prop="price" /><el-table-column label="数量" align="center"><template slot-scope="{ row }"><el-input-number:disabled="checked != row.code"size="small"v-model="row.num":value="0":min="0"@change="cardNumberChange(row)"></el-input-number></template></el-table-column><el-table-column label="总价" align="center"><template slot-scope="{ row }">{{ row.num * row.price }}</template></el-table-column></el-table><span slot="footer" class="dialog-footer avue-dialog__footer"><el-button @click="sailCardDialog = false">取 消</el-button><el-button type="primary" @click="getSailCards" v-loading="buyLoading">申 购</el-button></span>

data中的变量:

/*当前用户的余额*/currentBalance:0.00,cardData: [],//单选是否选中checked: null,/*服务卡的表单*/cardForm:{cardid:0,typeName:'',name:'',price:'',num:1,totalPrice:0,code:'',days:'',},

methods中的方法:

/*商品列表,行的单击事件*/cardRowClick(row){this.cardForm.code = row.code;this.checked = row.code;},/*数量的改变事件*/cardNumberChange(row){this.cardForm.code = row.code;this.cardForm.name = row.name;this.cardForm.price = row.price;this.cardForm.days = row.days;this.cardForm.typeName = row.typeName;this.cardForm.totalPrice = row.price * row.num;this.cardForm.num = row.num;},/*单选按钮的改变事件*/cardRadionChange(row) {this.checked = row.code;},//申请购买的按钮(点击之后验出来商品的列表框)getSailCard(row) {this.cardForm = {};this.checked = null;this.payorderList = row;this.loadCardList(this.page);this.sailCardDialog = true;//获取当前用户余额getMyBalance().then((res) => {this.currentBalance = res.data.balance;});},//去购买的操作getSailCards() {if (this.cardForm.num == undefined || this.cardForm.num == 0) {this.$message({message: "请填写购买数量",type: "warning",});return;}//如果余额不足if(this.currentBalance<this.cardForm.totalPrice){this.$message({message: "当前余额不足,请及时重制~",type: "warning",});//跳转到充值页面this.$router.push({path: "/capital/invest"})return;}this.isPayDialog = true;},

以上就是所有的代码……实现起来也不是很难~

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

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

相关文章

常用公有云接入——阿里

一、术语 中文英文说明地域Region阿里云建设的数据中心。资源创建成功后无法更换地域。可用区Zone同一地域内&#xff0c;电力和网络互相独立的物理数据中心。一个地域下可以有多个可用区。同一地域内可用区之间内网互通并且故障隔离&#xff0c;云服务器 ECS 网络延时低。实例…

ASP.NET Core Razor 视图组件

视图组件简介 在新的ASP.NET Core MVC中&#xff0c;视图组件类似于局部视图&#xff0c;但它们更强大。视图组件不使用模型绑定&#xff0c;仅依赖于您在调用时提供的数据。 视图组件特性&#xff1a; 呈现页面响应的某一部分而不是整个响应包括在控制器和视图之间发现的关…

POJ3468-A Simple Problem with Integers【线段树,树状数组,分块】

正题 题目链接&#xff1a;我是链接 其实洛谷线段树模板也是一样的&#xff1a;三种方法AC评测链接 题目大意 要求支持区间修改&#xff0c;区间求和。 线段树 直接用一个lazy标记&#xff0c;在之前的博客里有说 code1 #include<cstdio> #include<algorithm>…

“JSON parse error: Unexpected character (‘1‘ (code 49))的解决方式

现在是&#xff1a;2022年4月30日22:29:49 大家好&#xff0c;我是雄雄。 刚刚在调用接口的时候&#xff0c;出现了个错误&#xff1a; {"code": 400,"success": false,"data": null,"msg": "JSON parse error: Unexpected char…

三个好用的并发工具类

转载自 三个好用的并发工具类 以前的文章中&#xff0c;我们介绍了太多的底层原理技术以及新概念&#xff0c;本篇我们轻松点&#xff0c;了解下 Java 并发包下、基于这些底层原理的三个框架工具类。 它们分别是&#xff1a; 信号量 Semaphore 倒计时门栓 CountDownLatch …

Error Handling in ASP.NET Core

前言 在程序中&#xff0c;经常需要处理比如 404&#xff0c;500 &#xff0c;502等错误&#xff0c;如果直接返回错误的调用堆栈的具体信息&#xff0c;显然大部分的用户看到是一脸懵逼的&#xff0c;你应该需要给用户返回那些看得懂的界面。比如&#xff0c;“当前页面不存在…

基于python的selenium

一.安装 安装WebDriver 查看chrome版本号&#xff0c;设置-帮助-关于Google chrome&#xff0c;找到版本号。 可以到这个网站进行下载对应版本的chromedriver,如果chrome浏览器版本过高,可以下载最新版的chromedriver进行使用 Chrome for Testing availability 下载下来之后…

多信息登录、检测用户信息是否完善且引导补全

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注&#xff1a;穆雄雄的博客 前言 现在是2022年4月28日13:41:29&#xff01; 今天分享两块内容。 1.需求&#xff1a;用户可以通过手机号、邮箱来注册我们的系统&#xff0c;用户完成之后&#xff0c;可以去完善自己的个人信息…

Ch4302-IntervalGCD【线段树,树状数组,GCD】

正题 题目链接:http://contest-hunter.org:83/contest/0x40%E3%80%8C%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E8%BF%9B%E9%98%B6%E3%80%8D%E4%BE%8B%E9%A2%98/4302%20Interval%20GCD 题目大意 要求支持区间修改和区间求gcd。 解题思路 如果直接线段树gcd的话&#xff0c;区间…

PNG 图片压缩原理解析

转载自 PNG 图片压缩原理解析 什么是PNG PNG的全称叫便携式网络图型&#xff08;Portable Network Graphics&#xff09;是目前最流行的网络传输和展示的图片格式&#xff0c;原因有如下几点&#xff1a; 无损压缩&#xff1a;PNG图片采取了基于LZ77派生算法对文件进行压缩&…

element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年5月3日11:47:15&#xff01;劳动节假期已经过去了三天了&#xff0c;今天是被封家里的第7天&#xff0c;也是解封的第一天。 说实话&#xff0c;在家里的工作效率一点都…

POJ2182-Lost Cows【树状数组,二分】

正题 题目链接:http://poj.org/problem?id2182 题目大意 给出每头牛前面有多少个比它高的&#xff0c;求每头牛的最大高度。 解题思路 建立一个01序列&#xff0c;表示每个高度是否被占用过&#xff0c;然后倒序扫描每次找到一个没有被占用的第Ai1个位置&#xff0c;然后标…

TypeScript 2.5 发布,增加语言级重构

在 TypeScript 2.5 版本中&#xff0c;Microsoft 专注于提高开发人员的生产力&#xff0c;其范围已经超出了代码编辑器所提供的常见功能。 习惯于类型语言&#xff08;如 C&#xff03;&#xff09;的开发人员喜欢使用那些可以轻松执行常见重构的工具。现在 TypeScript 可以利…

永远不要在 MySQL 中使用 UTF-8

转载自 永远不要在 MySQL 中使用 UTF-8 最近我遇到了一个 bug&#xff0c;我试着通过 Rails 在以“utf8”编码的 MariaDB 中保存一个 UTF-8 字符串&#xff0c;然后出现了一个离奇的错误&#xff1a; Incorrect string value: ‘\xF0\x9F\x98\x83 <…’ for column ‘sum…

element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年5月3日13:35:15&#xff01;文接上篇。[element ui实现多层级复杂表单的操作&#xff08;添加与回显&#xff09;之表单操作交互操作](element ui实现多层级复杂表单的操…

POJ1151-Atlantis【线段树,扫描线,离散化】

正题 题目链接:http://poj.org/problem?id1151 题目大意 有n个矩形&#xff0c;求所以矩形的覆盖面积。 解题思路 我们用离散化一个坐标&#xff0c;然后每次用线段树维护这个宽度内覆盖高度和&#xff0c;然后定义左上的点是加入&#xff0c;右下的点是弹出。 code #incl…

Entity Framework Core Like 查询揭秘

在Entity Framework Core 2.0中增加一个很酷的功能&#xff1a;EF.Functions.Like()&#xff0c;最终解析为SQL中的Like语句&#xff0c;以便于在 LINQ 查询中直接调用。 不过Entity Framework 中默认提供了StartsWith、Contains和EndsWith方法用于解决模糊查询&#xff0c;那…

JVM发生OOM的 8 种原因、及解决办法

转载自 JVM发生OOM的 8 种原因、及解决办法 1、Java 堆空间 发生频率&#xff1a;5颗星 造成原因 无法在 Java 堆中分配对象 吞吐量增加 应用程序无意中保存了对象引用&#xff0c;对象无法被 GC 回收 应用程序过度使用 finalizer。finalizer 对象不能被 GC 立刻回收。fina…

element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年5月3日17:02:30&#xff01;文接上两篇。 [element ui实现多层级复杂表单的操作&#xff08;添加与回显&#xff09;之表单操作交互操作](element ui实现多层级复杂表单…

在Mac的Docker中运行DotNetCore2.0

最近学习Angular4&#xff0c;服务端准备使用DotNetCore API来实现&#xff0c;本文简单介绍下在Mac中怎样将DotNetCore程序部署在Docker中&#xff0c;并使用Nginx做反向代理让程序可以跑起来。 具体步骤如下 安装Docker拉取DotNetCore镜像使用VS For Mac创建DotNetCore应用…