Vue实现多选、单选的样式切换

Posted 2023-04-27

参考技术A 样式切换在实际项目应用中，也是非常常用的，这里就说一下在vue框架中多选和单选的实现。

css选中样式

多选

单选

表视图单选和多选的实现

1.实现思路:

我的直接思路是修改某一个Cell的样式即可,

那么修改样式需要通过修改对应的数据,

从这里可以推断我们需要给Cell对应的数据设置一个标志位,

当选中的时候来修改该标志位刷新那一行即可

如果是单选实现稍微复杂一些:

单选需要设置一个属性来保存上一次选中的行,

待选中新的行之后需要修改该行,不断维护

 

2.单选实现的简单代码如下:

 /*实现单选
    NSIndexPath *temp = self.lastSelected;//暂存上一次选中的行
    if(temp && temp!=indexPath)//如果上一次的选中的行存在,并且不是当前选中的这一样,则让上一行不选中
    {
        SelectAssertModel *model = self.selectArray[temp.row];
        
        model.ifSelected = NO;//修改之前选中的cell的数据为不选中
        [tableView reloadRowsAtIndexPaths:@[temp] withRowAnimation:UITableViewRowAnimationAutomatic];//刷新该行
    }
    self.lastSelected = indexPath;//选中的修改为当前行
    SelectAssertModel *model = self.selectArray[temp.row];
    model.ifSelected = YES;//修改这个被选中的一行choon
    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];//重新刷新这一行
    
     */

 

3.多选实现的简单代码如下:

 SelectAssertModel *model = self.selectArray[indexPath.row];
    
    if (!model.ifSelected) {
        model.ifSelected = YES;//修改这个被选中的一行
        
    }
    else{
        model.ifSelected = NO;//修改这个被选中的一行

    }
     [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];//刷新该行
}

 

4.统计选择的数据:

//"确定"按钮被点击
- (void)rightItemDidClicked:(UIBarButtonItem *)item {

    //每次进来记得清除数组
    [self.selectedArray removeAllObjects];
    for (SelectAssertModel *model in self.selectArray) {
        if (model.ifSelected) {
            
            [self.selectedArray addObject:model];
        }
    }
    NSLog(@"count = %ld",self.selectedArray.count);
    NSLog(@"count = %@",self.selectedArray);

}