大家好，我是雄雄，歡迎關注微信公衆号：雄雄的小課堂
前言
需求是這樣的：使用者單擊購買産品的按鈕時，會出現一個産品的清單，但是呢隻能買一種産品，暫時不可以多選。效果如下所示：
原來做的是，單擊前面的單選按鈕，後面的數量表單放開禁用，可以選擇和填寫；現在需要改成，直接點選某一行，則改行自動選中，當然數量表單也放開可供使用者直接輸入和填寫。
實作方法
架構原來用的是
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;
},