1：添加ng-table封装的表格组件 2：修改ag-grid的表格按钮样式

src/app/routes/data-v/lj-table/lj-table.component.css

@@ -0,0 +1,19 @@
+.ant-table-bordered .ant-table-thead > tr > th,
+.ant-table-bordered .ant-table-tbody > tr > td {
+  border-color: white !important;
+}
+
+/* 表格头部区域添加里边框 */
+.tableColor .ant-table-tbody > tr > td{
+    border-right: 3px solid #2b3e71 !important;
+    border-bottom: 1px solid #334474 !important;
+    transition: background 0.3s;
+}
+
+/* 表格内容区域添加里边框 */
+.tableColor .ant-table-thead > tr > th{
+    color: #bfceff !important;
+    background-color: transparent !important;
+    border-right: 3px solid #2b3e71 !important;
+    border-bottom: 1px solid #334474 !important;
+}

src/app/routes/data-v/lj-table/lj-table.component.html

@@ -0,0 +1,29 @@
+<nz-table #dynamicTable nzBordered nzSize="small" [nzData]="data" [nzPageSize]="5">
+  <thead>
+    <tr>
+      <th
+        style="
+          background: rgb(8 22 48);
+          /* color: #bfceff !important; */
+          color: #75f9fd;
+          text-align: center;
+          border: 0.5px solid #ffffff !important;
+        "
+        *ngFor="let column of columns"
+        nzShowSort="true"
+        >{{ column.title }}</th
+      >
+    </tr>
+  </thead>
+  <tbody style="background: rgb(8 22 48)">
+    <tr *ngFor="let rowData of dynamicTable.data">
+      <td
+        *ngFor="let column of columns"
+        style="text-align: center; color: #75f9fd; border: 0.5px solid #ffffff !important; transition: background 0.3s"
+        >{{ rowData[column.key] }}</td
+      >
+    </tr>
+  </tbody>
+</nz-table>
+<!-- <nz-pagination [nzPageIndex]="1" [nzTotal]="500" /> -->
+<!-- <label>{{ data.length }}</label> -->

src/app/routes/data-v/lj-table/lj-table.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, ViewChild, inject, Input } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFSchema } from '@delon/form';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+import { SHARED_IMPORTS } from '@shared';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { NzTableModule } from 'ng-zorro-antd/table';
+
+// 在你的组件文件中
+export interface TableColumn {
+  key: string; // 数据的键名
+  title: string; // 列标题
+}
+
+@Component({
+  selector: 'app-data-v-lj-table',
+  standalone: true,
+  imports: [...SHARED_IMPORTS, CommonModule, NzPaginationModule],
+  templateUrl: './lj-table.component.html',
+  styleUrls: ['./lj-table.component.css']
+})
+export class DataVLjTableComponent implements OnInit {
+  @Input() columns: TableColumn[] = [];
+  @Input() data: any[] = [];
+  // showTotal = (total: number, range: [number, number]) => `Total ${total} items, showing ${range[0]}-${range[1]}`;
+
+  ngOnInit(): void {
+    console.log(this.data);
+  }
+  // listOfData: Person[] = [
+  //   {
+  //     key: '1',
+  //     name: 'John Brown',
+  //     age: 32,
+  //     address: 'New York No. 1 Lake Park'
+  //   },
+  //   {
+  //     key: '2',
+  //     name: 'Jim Green',
+  //     age: 42,
+  //     address: 'London No. 1 Lake Park'
+  //   },
+  //   {
+  //     key: '3',
+  //     name: 'Joe Black',
+  //     age: 32,
+  //     address: 'Sidney No. 1 Lake Park'
+  //   }
+  // ];
+}

src/app/routes/data-v/routes.ts

@@ -2,12 +2,13 @@ import { Routes } from '@angular/router';
 
 import { DataVDateComponent } from './date/date.component';
 import { DataVHomeComponent } from './home/home.component';
+import { DataVLjTableComponent } from './lj-table/lj-table.component';
 import { DataVS1Component } from './s1/s1.component';
 import { DataVSecond1Component } from './second1/second1.component';
+import { DataVT1Component } from './t1/t1.component';
 import { DataVThreejsComponent } from './threejs/threejs.component';
 import { DataVUserComponent } from './user/user.component';
 import { DataVWorkstationComponent } from './workstation/workstation.component';
-import { DataVT1Component } from './t1/t1.component';
 
 export const routes: Routes = [
   {
@@ -21,5 +22,7 @@ export const routes: Routes = [
     data: { menu: null }
   },
   { path: 'threejs/:id', component: DataVThreejsComponent },
-  { path: 't1/:id', component: DataVT1Component }
+  { path: 't1/:id', component: DataVT1Component },
+  { path: 'lj-table', component: DataVLjTableComponent },
+  { path: 'lj-table', component: DataVLjTableComponent }
 ];

src/app/routes/data-v/t1/t1.component.html

@@ -1,6 +1,5 @@
 <!-- <div #Three style="background-color: red;"></div> -->
 
-
-<div style="display: flex; flex-direction: column; height: 100vh;">
-  <div #Three style="flex-grow: 1;"></div>
-</div>
+<div style="display: flex; flex-direction: column; height: 100vh">
+  <div #Three style="flex-grow: 1"></div>
+</div>

src/app/routes/data-v/workstation/ButtonCellRenderer.css

@@ -0,0 +1,8 @@
+.custom-button {
+    cursor: pointer;
+    padding: 5px 10px;
+
+    /* background-color: #f0f0f0; Change the background color as needed */
+    border: none;
+  }
+  

src/app/routes/data-v/workstation/ButtonCellRenderer.ts

@@ -0,0 +1,28 @@
+import { ICellRendererParams, ICellRendererComp } from 'ag-grid-community';
+
+export class ButtonCellRenderer implements ICellRendererComp {
+  destroy?(): void {
+    throw new Error('Method not implemented.');
+  }
+  refresh(params: ICellRendererParams<any, any, any>): boolean {
+    throw new Error('Method not implemented.');
+  }
+  eGui!: HTMLElement;
+
+  init(params: ICellRendererParams) {
+    this.eGui = document.createElement('button');
+    // this.eGui.innerHTML = '<button nz-button nzType="primary" nzSize="small">Small</button>';
+    this.eGui.innerHTML = '<button style="background-color: transparent; border: none; cursor: pointer;">Click Me</button>';
+    // this.eGui.c
+    // this.eGui.className = 'custom-button';
+    this.eGui.addEventListener('click', () => {
+      // Handle button click event
+    });
+  }
+
+  getGui() {
+    return this.eGui;
+  }
+
+  // Implement other necessary methods...
+}

src/app/routes/data-v/workstation/grid-button/grid-button.less

@@ -1,17 +1,20 @@
 .ag-grid-button-style {
     cursor: pointer;
     display: inline-block; 
-    width: 90px;   
-    height: 90%; 
+    width: 90px;
+    margin: 4px; /* Add margin for spacing around the button */
+    padding: 8px 12px; /* Add padding for spacing */   
     font-weight: 800; 
-    color: #74FAFB;
+    color: #E0E0E0; /* Light gray text color */
     text-align: center;
-    background-color: transparent;
-    border-color: #74FAFB;
-    border-radius: 4px; 
+    text-decoration: none; /* Remove default underline */
+    background-color: #1E4D6B; /* Dark blue background color */
+    border: none; /* Remove border */
+    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
 }
 
 .ag-grid-button-style:hover {
-    color: white;
-    background-color: #74FAFB; 
+    color: #FFF; /* White text color on hover */
+    text-decoration: underline; /* Add underline on hover */
+    background-color: #3A6D8C; /* Lighter blue background color on hover */
 }

src/app/routes/data-v/workstation/grid-button/grid-button.ts

@@ -5,14 +5,12 @@ import { ICellRendererParams } from 'ag-grid-community';
 @Component({
   standalone: true,
   template: `
-   <span style="display: flex; justify-content: center; align-items: center; height: 100%;">
-    <button class="ag-grid-button-style" (click)="buttonClicked()">{{cellValue}}</button>
-</span>
-
+    <span style="display: flex; justify-content: center; align-items: center; height: 100%;">
+      <button class="ag-grid-button-style" (click)="buttonClicked()">{{ cellValue }}</button>
+    </span>
   `,
   styleUrls: ['./grid-button.less']
 })
-
 export class GridButtonValueRenderer implements ICellRendererAngularComp {
   public cellValue!: string;
   public cellPath!: string;
@@ -35,4 +33,4 @@ export class GridButtonValueRenderer implements ICellRendererAngularComp {
   getValueToDisplay(params: ICellRendererParams) {
     return params.valueFormatted ? params.valueFormatted : params.value;
   }
-}
+}

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html

@@ -13,10 +13,10 @@
     [columnDefs]="columnDefs"
     [rowHeight]="38"
   />
-
+  <!-- <app-data-v-lj-table [columns]="tableColumns" [data]="tableData" /> -->
   <br />
   <!-- 分页 -->
-  <div class="grid-pagination">
+  <!-- <div class="grid-pagination">
     <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
     <nz-pagination
       [nzPageIndex]="pageIndex"
@@ -27,5 +27,5 @@
       [className]="paginationThemeClass"
       nzShowSizeChanger
     />
-  </div>
+  </div> -->
 </lj-data-v-card>

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts

@@ -4,12 +4,13 @@ import { ColDef, GridApi } from 'ag-grid-community';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 
 import { LJDataVCardComponent } from '../../lj-card/lj-card.component';
+import { TableColumn, DataVLjTableComponent } from '../../lj-table/lj-table.component';
 @Component({
   selector: 'lj-app-ag-grid-component',
-  imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent],
   standalone: true,
   templateUrl: './lj-ag-grid-component.component.html',
-  styleUrls: ['./pagination-style/pagination.less']
+  styleUrls: ['./pagination-style/pagination.less'],
+  imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent]
 })
 export class LjAgGridComponentComponent implements OnInit {
   [x: string]: any;
@@ -40,10 +41,47 @@ export class LjAgGridComponentComponent implements OnInit {
   @Input() paginationThemeClass: string = 'ag-theme-quartz';
   /** 构造函数 */
   constructor() {}
+  // 在父组件的类中
+  tableColumns: TableColumn[] = [
+    { key: 'sort', title: '序号' },
+    { key: 'time', title: '时间' },
+    { key: 'option', title: '操作' },
+    { key: 'optionDesc', title: '操作描述' },
+    { key: 'optionMan', title: '操作人员' },
+    { key: 'mark', title: '备注' },
+    { key: 'edit', title: '编辑' }
+
+    // 其他列配置...
+  ];
+
+  tableData = [
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
+    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }
+
+    // 其他数据...
+  ];
   /**初始化 */
   ngOnInit() {
     console.log('-----表格初始化-----');
-    this.title = '代办任务';
+    this.title = '待办任务';
     this.pageSize = 10;
     this.pageIndex = 1;
     this.pageRowTotal = this.rowData.length;

src/app/routes/data-v/workstation/workstation.component.less

@@ -25,7 +25,14 @@
 
 /* 分页器 */
 
-
+.ag-header-center .ag-header-group-cell-label, 
+.ag-header-center .ag-header-cell-label {
+    display: grid;
+    justify-content: center;
+    color: #000;
+    text-align: center;
+    background: #000;
+}
 
 ::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
     color: red !important;

src/app/routes/data-v/workstation/workstation.component.ts

@@ -60,7 +60,7 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
 
     { headerName: '任务名称', unSortIcon: true, width: 120, field: 'rwmc' },
     { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
-    { headerName: '开始时间', unSortIcon: true, field: 'kssj', width: 180 },
+    { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },
     { headerName: '计划完成时间', unSortIcon: true, field: 'jhwcsj', width: 180 },
     { headerName: '超期', width: 70, field: 'sfcq' },
     { headerName: '操作', width: 90, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }

src/app/routes/routes.ts

@@ -3,10 +3,10 @@ import { startPageGuard } from '@core';
 import { authSimpleCanActivate, authSimpleCanActivateChild } from '@delon/auth';
 
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { LayoutBasicComponent, LayoutBlankComponent } from '../layout';
 import { DataVHomeComponent } from './data-v/home/home.component';
+import { DataVLjTableComponent } from './data-v/lj-table/lj-table.component';
 import { DataVWorkstationComponent } from './data-v/workstation/workstation.component';
-
+import { LayoutBasicComponent, LayoutBlankComponent } from '../layout';
 export const routes: Routes = [
   {
     path: 'home',