一夜涕、先來看下大體的效果圖(單選):
二焕妙、代碼:
template:
<p class="title">產(chǎn)品</p>
<template>
<el-table :data="policyResults" stripe style="width: 100%" @current-change="toggerCheckBoxListHandle">
<el-table-column prop="addProductName" label="產(chǎn)品名稱" >
<template slot-scope="scope">
<span>{{scope.row.addProductName}}</span>
</template>
</el-table-column>
<el-table-column prop="addProductPrice" label="單價">
<template slot-scope="scope">
<span>{{scope.row.addProductPrice | numFilter}}</span>
</template>
</el-table-column>
<el-table-column prop="" label="總價">
<template slot-scope="scope">
{{scope.row.addProductPrice*(adultNum+childrenNum) | numFilter}}
</template>
</el-table-column>
<el-table-column label="操作" width="55">
<template slot-scope="scope">
<el-checkbox @change="changeCheckedHandle(scope.row)" v-model='scope.row.checked'></el-checkbox>
</template>
</el-table-column>
</el-table>
</template>
script:
data () {
return {
adultNum:2,
childrenNum:1,
policyResults:[
{
"addProductId":"dfsd2343-343-fe2-fcxc",
"addProductName":"產(chǎn)品1",
"addProductPrice":7.0,
"checked":false,
},
{
"addProductId":"ferer23-343-fe2-fcxc",
"addProductName":"產(chǎn)品2",
"addProductPrice":17.8,
"checked":false,
},
{
"addProductId":"vrtrtrtg-533-432-f434",
"addProductName":"產(chǎn)品3",
"addProductPrice":15.0,
"checked":false,
},
]
}
},
methods:{
// 表格行點擊事件
toggerCheckBoxListHandle (row) {
this.policyResults.forEach(item => {
// 排他,每次選擇時把其他選項都清除
if (item.addProductId != row.addProductId) {
item.checked = false
} else {
item.checked = true;
//深度賦值
var _obj = JSON.stringify(item);
this.insuranceInfo = JSON.parse(_obj);
this.fillOrderParams.orderAddProducts = JSON.parse(_obj);
this.fillOrderParams.orderAddProducts.id = this.fillOrderParams.orderAddProducts.addProductId;
this.fillOrderParams.orderAddProducts.checked = true;
}
})
console.log(row)
},
// 切換多選框
changeCheckedHandle(item){
if(!item.checked){
this.insuranceInfo.addProductId='';
this.insuranceInfo.addProductName='';
this.insuranceInfo.addProductPrice=0;
this.insuranceInfo.addProductType='';
this.insuranceInfo.brandLogo='';
this.insuranceInfo.supplierName='';
}else{
var _obj = JSON.stringify(item);
this.insuranceInfo = JSON.parse(_obj);
}
}
}
~~ 歡迎留言指教 _