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

蚂蚁金服参照模板是这样的但是是一个多选框（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]="data.disabled" (nzCheckedChange)="onItemChecked(data.id, $event,i)"></td><td>{{ data.$displays.servant }}</td><td>{{ data.properties.countyAttendenceCount}}</td><td>{{ data.properties.countyAttendenceAllowance}}</td><td>{{ data.properties.townAttendenceCount}}</td><td>{{ data.properties.townAttendenceAllowance }}</td><td>{{ data.properties.totalAttendenceAllowance }}</td><td>{{ data.properties.execptionalAttendenceDeduct }}</td><td>{{ data.properties.mailEvaluationDeduct }}</td><td>{{ data.properties.unnormalLedgerDeduct }}</td><td>{{ data.properties.unqualifiedStationCallRollDeduct }}</td><td>{{ data.properties.unqualifiedCenterCallRollDeduct }}</td><td [ngClass]="data.properties.recheckAllowance ? 'Blue':'Blacks'">{{ data.properties.totalAllowance }}</td><td [ngClass]="!data.properties.checkResult ? 'Red':'Blacks'">{{ data.properties.checkAmount }}</td><td>{{ data.properties.actualAmount }}</td></tr></tbody>

[nzChecked]=“data.disabled” checked这个是选中样式

(nzCheckedChange)=“onItemChecked(data.id, $event,i)” 拿到他的id（用于筛选）还有index

js代码

onItemChecked(id: number, checked: boolean, i: number): void {if (checked) {this.uploadId = id}if (id == this.DataList[i].id) {this.DataList.forEach(item => {item.disabled = false})this.DataList[i].disabled = true}this.updateCheckedSet(id, checked);this.refreshCheckedStatus();}

判断checked
然后将所有数组数据中的 disabled 赋值
就只有拿到的那一行数据取反
就OK了

NG-ZORRO 表格多选框改为单选框（angular框架）相关推荐

html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作. 实现效果: HTML代码: 获取选中行数据设置选中行 layui.use('table', func ...
复选框(checkbox)、单选框（radiobox）的使用
复选框(checkbox).单选框(radiobox)的使用复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
checkbox多选框，radio单选框
checkbox多选框,radio单选框一.checkbox多选框 1.语法 2.用法实例二.radio单选框 1.语法 2.案例一.checkbox多选框 1.语法 <input nam ...
html表单设置单选框,html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>/* ...
html滚动选择框代码,如何使用最简单纯Css代码美化checkbox复选框、radios单选框和滑动按钮...
最简洁的代码美化复选框.单选框和滑动按钮效果预览 1. 复选框 .switch { margin: 20px 20px 0 0; display: flex; align-items: center ...
java写html的多选框,Selenium+java - 单选框及复选框处理
Selenium+java - 单选框及复选框处理一.什么是单选框.复选框? 二.被测页面html源代码 CheckBoxRadioDemo.html CheckBox.Radio练习案例复选框 ...
复选框如何实现单选框效果
复选框一般可以选择多个item,选中的项放到一个数组中,每个item之间不是互斥的效果而单选框一般是在同一个组中,组中的每个项彼此之间是互斥的,即:选择A,B就不能选,选择B,A就不能选那么,怎么 ...
Android用按钮确定单选框,Android RadioButton单选框的使用方法
Android RadioButton单选框的使用方法复制代码代码如下: public class MainActivity extends Activity { public RadioGrou ...

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

NG-ZORRO 表格多选框改为单选框（angular框架）相关推荐

最新文章

热门文章

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

NG-ZORRO 表格多选框改为单选框 （angular框架）相关推荐

最新文章

热门文章

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

NG-ZORRO 表格多选框改为单选框（angular框架）相关推荐