日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

手寫一個angular中帶checkbox的table組件

作者:喵cat 更新時間: 2022-03-03 編程語言

效果如下:

? ? ? ?? ?

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
  }
}

?

原文鏈接:https://blog.csdn.net/hwqdmn1234/article/details/116799368

欄目分類
最近更新