前言
需求是这样的：用户单击购买产品的按钮时，会出现一个产品的列表，但是呢只能买一种产品，暂时不可以多选。效果如下所示：
原来做的是，单击前面的单选按钮，后面的数量表单放开禁用，可以选择和填写；现在需要改成，直接点击某一行，则改行自动选中，当然数量表单也放开可供用户直接输入和填写。
实现方法
框架原来用的是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-table ref="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; }, //跳转到充值页面 this.$router.push({ path: "/capital/invest" }) return; } this.isPayDialog = true; },
以上就是所有的代码……实现起来也不是很难~
