angular表格排序分页

原创

于 2025-02-24 14:06:24 发布 · 487 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #前端 #javascript

说明:
使用angular实现表格，包括数据源，排序，分页
效果图：
在这里插入图片描述

step1:C:\Users\Administrator\WebstormProjects\untitled4\src\app\setting\setting.component.ts

import {
   
    Component, ViewChild, AfterViewInit } from '@angular/core';
import {
   
    MatTableModule, MatTableDataSource } from '@angular/material/table';
import {
   
    MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import {
   
    MatSort, MatSortModule } from '@angular/material/sort';
import {
   
    CommonModule } from '@angular/common';
import {
   
    MatInputModule } from '@angular/material/input';
import {
   
    MatFormFieldModule } from '@angular/material/form-field';
import {
   
   MatIcon} from '@angular/material/icon';

export interface UserData {
   
   
  id: string;
  name: string;
  email: string;
  role: 'Admin' | 'User' | 'Guest';
}

@Component({
   
   
  selector: 'app-setting',
  standalone: true,
  imports: [
    CommonModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule,
    MatFormFieldModule,
    MatIcon
  ],
  templateUrl: './setting.component.html',
  styleUrls: ['./setting.component.css']
})
export class SettingComponent implements AfterViewInit {
   
   
  displayedColumns: string[] = ['id', 'name', 'email', 'role'];
  dataSource: MatTableDataSource<UserData>;

  @ViewChild(MatPaginator) paginator

最低0.47元/天解锁文章