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

前言

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

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

实现方法

框架原来用的是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;},//跳转到充值页面this.$router.push({path: "/capital/invest"})return;}this.isPayDialog = true;},

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