el-radio-group放再数组列表中,第一行单选之后默认得高亮不取消,如何解决
时间: 2024-09-12 22:11:13 浏览: 45
如果你想在`el-radio-group`放在数组列表的第一个元素中,并且当第一个元素的单选状态改变后默认保持高亮,可以按照以下步骤操作:
1. **保存初始状态**:首先,你需要在数据初始化时设置一个初始状态,通常在`data`里添加一个对象来存储每行的状态信息,包括默认选中的选项。例如:
```javascript
data() {
return {
rows: [
{ id: 1, jc: 1, isHighlighted: true }, // 默认选中且高亮
{ id: 2, jc: 0 }, // 其他行
//...
]
};
},
```
2. **双向数据绑定**:将`isHighlighted`属性绑定到`el-radio-button`的`active-class`,这会使得按钮在选中时获得高亮效果:
```html
<el-radio-button :label="1" :active-class="{ active: row.isHighlighted }">进场</el-radio-button>
```
3. **处理单选事件**:在`el-radio-group`的`change`事件中,更新所有行的状态。如果用户改变了第一行(`row.id === 1`)的`jc`值,保留`isHighlighted`的值:
```javascript
<el-radio-group v-model="rows[0].jc" @change="updateRadioGroupStatus">
// ...
methods: {
updateRadioGroupStatus(value) {
for (let row of this.rows) {
row.isHighlighted = value === row.jc;
}
}
}
```
4. **处理其他交互**:如果用户切换到列表的其他部分或选择了其他行,确保只关注当前选中的行,比如当用户滚动列表时:
```javascript
watch: {
'$refs.elTableScroll': {
handler(val) {
if (!val.firstRowIsSelected()) {
this.updateRadioGroupStatus(false); // 只有第一行被选中时才保持高亮
}
},
immediate: true
}
},
methods: {
firstRowIsSelected() {
return this.rows[0].isHighlighted;
}
}
```
这里假设`$refs.elTableScroll`是一个引用了表格滚动区域的对象,`firstRowIsSelected`方法用于检查第一行是否被选中。
现在,当用户在第一行中切换单选状态时,它会保持高亮,除非他们切换到其他行。如果在其他部分滚动或切换到其他行,第一行的高亮会被取消。
阅读全文