行内互斥
<el-table
:data="listData"
:span-method="objectSpanMethod"
:cell-style="{'border-right': '1px solid #eee','border-bottom': '1px solid #eee'}"
:row-style="{'border-left': '1px solid #eee'}"
:header-cell-style="{'border-right': '1px solid #eee','background-color': '#f4f7f9!important', 'color': 'rgba(0, 0, 0, 0.65)', 'border-bottom': '0px'}"
stripe
style="width: 100%"
>
<el-table-column prop="name" label="评价内容" align="center" >
<el-table-column prop="normLevelOneName" label="一级指标" width="300"> </el-table-column>
<el-table-column prop="normLevelTwoName" label="二级指标" width="400"> </el-table-column>
</el-table-column>
<el-table-column prop="normName" label="非常满意" width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.column1Selected" @change="handleCheckboxChange(scope.row, 'column1Selected')"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="coe" label="满意" width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.column1Selected1" @change="handleCheckboxChange(scope.row, 'column1Selected1')"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="normItemName" label="一般" width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.column1Selected2" @change="handleCheckboxChange(scope.row, 'column1Selected2')"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="normItemName" label="不满意" width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.column1Selected3" @change="handleCheckboxChange(scope.row, 'column1Selected3')"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="normItem" label="非常不满意" width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.column1Selected4" @change="handleCheckboxChange(scope.row, 'column1Selected4')"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="normItemName" label="不了解" width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.column1Selected5" @change="handleCheckboxChange(scope.row, 'column1Selected5')"></el-checkbox>
</template>
</el-table-column>
方法
handleCheckboxChange(row, selectedField) {
for (const field in row) {
if (row.hasOwnProperty(field) && field !== selectedField && field.startsWith('column1Selected')) {
row[field] = false;
}
}
},
- row.hasOwnProperty(field):确保 field 是 row 对象自身的属性,而不是继承自原型链的属性。
- field !== selectedField:确保当前属性不是被选中的那个checkbox对应的属性。这是为了避免将当前选中的checkbox状态设置为 false。
- field.startsWith('column1Selected'):确保属性 名以 'column1Selected' 开头。这是为了过滤出与checkbox相关的属性。
- row[field] = false;:如果上述条件都满足,就将当前属性的值设置为 false,即取消选择对应的checkbox。