46设计网站官网,网络营销策划书包括哪些内容,wordpress分页显示,网站开发案例详解下载大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂 前言
需求是这样的#xff1a;用户单击购买产品的按钮时#xff0c;会出现一个产品的列表#xff0c;但是呢只能买一种产品#xff0c;暂时不可以多选。效果如下所示#xff1a; 原来… 大家好我是雄雄欢迎关注微信公众号雄雄的小课堂 前言
需求是这样的用户单击购买产品的按钮时会出现一个产品的列表但是呢只能买一种产品暂时不可以多选。效果如下所示 原来做的是单击前面的单选按钮后面的数量表单放开禁用可以选择和填写现在需要改成直接点击某一行则改行自动选中当然数量表单也放开可供用户直接输入和填写。
实现方法
框架原来用的是avue写的这个框架确实好用可以提高开发效率很少的代码实现很多的功能但这也是个缺点代码是少了实现的功能也确实多不过你要单个实现某个子功能那可真的是太难为了……
avue也有表格的单选功能还有例子呢只是我加上之后没有效果。。。不知道是我代码的问题还是官方已经不支持了不想在去研究了直接换成了element ui去实现了。
html代码
div stylemargin:-20px 20px 20px 0;line-height: 40px;float: rightspan stylefont-size: 18px;color:#303133当前余额/spanspan stylefont-size: 18px;color:#F56C6C{{currentBalance}}/span/divel-tablerefcruds:queryquery:datacardDatahighlight-current-rowrow-clickcardRowClickcurrent-changehandleCurrentChangeel-table-column label选择 width80template slot-scope{ row }el-radio :labelrow.code v-modelcardForm.code changecardRadionChange(row)span/span/el-radio/template/el-table-columnel-table-column label类型 aligncenter proptypeName /el-table-column label名称 aligncenter propname /el-table-column label单价(元) aligncenter propprice /el-table-column label数量 aligncentertemplate slot-scope{ row }el-input-number:disabledchecked ! row.codesizesmallv-modelrow.num:value0:min0changecardNumberChange(row)/el-input-number/template/el-table-columnel-table-column label总价 aligncentertemplate slot-scope{ row }{{ row.num * row.price }}/template/el-table-column/el-tablespan slotfooter classdialog-footer avue-dialog__footerel-button clicksailCardDialog false取 消/el-buttonel-button typeprimary clickgetSailCards v-loadingbuyLoading申 购/el-button/spandata中的变量 /*当前用户的余额*/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.currentBalancethis.cardForm.totalPrice){this.$message({message: 当前余额不足请及时重制~,type: warning,});//跳转到充值页面this.$router.push({path: /capital/invest})return;}this.isPayDialog true;},//跳转到充值页面this.$router.push({path: /capital/invest})return;}this.isPayDialog true;},以上就是所有的代码……实现起来也不是很难~
