NG-ZORRO 表格多选框改为单选框（angular框架）

兔子R/T坦克

于 2021-03-20 14:29:00 发布

阅读量1.4k

点赞数 2

分类专栏：学习路上文章标签： angular es6

本文链接：https://blog.csdn.net/weixin_49050598/article/details/115026993

版权

这篇博客介绍了如何在使用NG-ZORRO框架的表格组件时，将默认的多选框改为单选框。作者提到，由于后端返回的数据不包含`disabled`属性，他们通过映射操作为每一项数据添加了该属性，并通过`nzShowCheckbox`API展示选框。在`td`元素中，使用`[nzChecked]="data.disabled"`和`(nzCheckedChange)="onItemChecked(data.id, $event, i)"`监听选中状态变化，JS代码中实现单选逻辑，当某行被选中时，更新所有数据的`disabled`属性，确保只有选中行的`disabled`取反。" 120327280,11122198,Linux应用编程：构建简单UDP socket交互,"['Linux编程', '网络编程', 'socket接口', 'UDP通信']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

蚂蚁金服参照模板是这样的但是是一个多选框（9.3版本注意，例子里面少写了一个api nzShowCheckbox 用于显示前面选框的）
在这里插入图片描述
我的样式如下

只可选中一个，其他的选框默认取消

这块写的有点笨因为后端返回的数据不带 disabled，所以我用map添加了一个disabled属性

 let list = res.result.data;
      let array = [];
      list.map((item, index) => {
   
        array.push(
          Object.assign(item, {
    disabled: false })
        )
      });
      this.DataList = list

主要设置在td里面所以就展示一下td代码吧

<tbody>
          <tr *ngFor="let data of DataList; index as i">
            <td nzShowCheckbox [nzChecked]

最低0.47元/天解锁文章

NG-ZORRO 表格多选框改为单选框 （angular框架）

NG-ZORRO 表格多选框改为单选框（angular框架）