手写一个angular中带checkbox的table组件

最新推荐文章于 2024-06-03 10:06:40 发布

喵cat

最新推荐文章于 2024-06-03 10:06:40 发布

阅读量318

点赞数

分类专栏： web前端文章标签： typescript 前端 angular

本文链接：https://blog.csdn.net/hwqdmn1234/article/details/116799368

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果如下：

HTML文件如下：

<table>
  <thead>
    <tr>
      <th width="20%">
        <input type="checkbox" [(ngModel)]="checkAll" (change)="changeChecked()" />
      </th>
      <th>资产名称</th>
      <th>资产规格</th>
      <th>资产编号</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableList;let key=index">
      <td>
        <input type="checkbox" [(ngModel)]="item.checkStatus" (change)="changeCheckedChild(item)" />
      </td>
      <td>{{item.assetName}}</td>
      <td>{{item.specificationModel}}</td>
      <td>{{item.assetNumber}}</td>
    </tr>
  </tbody>
</table>

ts文件如下：

export class WorkTableComponent implements OnInit {
  checkAll; // 全部选中
  tableList = [
    {
      "uuid": "605df9e6b88349bc882649d39f70b638",
      "assetNumber": "00002",
      "assetName": "小米显示屏",
      "specificationModel": "00002",
      checkStatus: false,
      "storAddr": "https://zkfoss.oss-cn-hangzhou.aliyuncs.com/pic/zkf_1593760586175.png"
    },
    {
      "uuid": "fd6f06103c4d4512957c45effaefbf88",
      "assetNumber": "11111111",
      "assetName": "11111",
      "specificationModel": "",
      "storAddr": null,
      checkStatus: false
    }
  ];
  constructor() { }

  ngOnInit() { }
  // 点击全选
  changeChecked() {
    this.tableList = this.tableList.map(item => Object.assign({}, item, { 
        checkStatus: this.checkAll 
     }))
  }
  // 点击每一项选择
  changeCheckedChild(getItem) {
    var onOff = true; // 假设所有的都是选中
    this.tableList.forEach(item => {
      if (!item.checkStatus) {
        onOff = false;
      }
    })
    this.checkAll = onOff
  }
}