Angular ng-zorro table拖拽配置列宽

一、技术框架及版本

1. JS框架 Angular，版本：6.0.0
2. UI框架 ng-zorro，版本：1.8.1

二、前提

1. 搭建Angular环境
2. 在Angular项目中引入ng-zorro
3. 创建一个自定义指令，用于监听鼠标事件
4. 在要监听的table 单元格元素标签上使用自定义指令

　　下面用一个demo示例来说明：

三、代码

• 在组件模板上使用ng-zorro table ，components.component.html

  <div nz-row nzGutter="0">
    <div nz-col nzSpan="20" nzOffset="2">
        <nz-table   nzBordered #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="tableDatas" [nzLoading]="loading"
        [nzTotal]="totalItems" [(nzPageIndex)]="currentPage" [(nzPageSize)]="itemsPerpage" (nzPageIndexChange)="getData()" (nzPageSizeChange)="getData()">
        <thead >
          <tr>
            <th appDynamicColumnWidth>ID</th>
            <th appDynamicColumnWidth>Name</th>
            <th appDynamicColumnWidth>Gender</th>
            <th appDynamicColumnWidth>Age</th>
          </tr>
        </thead>
        <tbody >
          <tr *ngFor="let data of ajaxTable.data">
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.gender}}</td>
            <td>{{data.age}}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div nz-col nzSpan="2">
  
    </div>
  </div>
  
  <br><br>

• 组件ts文件 ，components.component.ts

  import { Component, OnInit } from '@angular/core';
  import { TableDataService } from '../services/table--data.service';
  
  @Component({
    selector: 'app-components',
    templateUrl: './components.component.html',
    styleUrls: ['./components.component.css']
  })
  export class ComponentsComponent implements OnInit {
  
    public tableDatas: Array<Object> = [];
  
    // 等待动画
    public loading: boolean = false;
    // 分页配置
    public currentPage: number = 1;
    public itemsPerpage: number = 5;
    public totalItems: number = 0;
    constructor(
      private tableDataService:TableDataService
    ) { 
      
    }
  
    ngOnInit() {
      this.getData();
    }
  
  
    getData(){
      // 从服务器查询表格数据
      let result = this.tableDataService.getTableData(this.currentPage,this.itemsPerpage);
      console.log("result:",result);
      this.totalItems = result["totalCounts"];
      this.tableDatas = result["list"];
      
    }
  }

• 封装模拟请求服务器的接口服务，table-data.service.ts 

  import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TableDataService {
  
    constructor() { }
  
    getTableData(currentPage: number, itemsPerpage: number): Object {
      let totalDatas = [
        { id: 0, name: "张三", gender: "男", age: 23 },
        { id: 1, name: "李四", gender: "男", age: 25 },
        { id: 2, name: "王五", gender: "男", age: 28 },
        { id: 3, name: "赵六", gender: "男", age: 22 },
        { id: 4, name: "马七", gender: "男", age: 29 },
        { id: 5, name: "锅巴", gender: "男", age: 30 },
        { id: 6, name: "关羽", gender: "男", age: 56 },
        { id: 7, name: "张飞", gender: "男", age: 28 },
        { id: 8, name: "刘备", gender: "男", age: 26 },
        { id: 9, name: "王启年", gender: "男", age: 23 },
        { id: 10, name: "郭麒麟", gender: "男", age: 28 },
        { id: 11, name: "陈萍萍", gender: "男", age: 45 },
        { id: 12, name: "影子", gender: "男", age: 67 },
        { id: 13, name: "高达", gender: "男", age: 89 },
        { id: 14, name: "上山虎", gender: "男", age: 24 },
        { id: 15, name: "海棠朵朵", gender: "男", age: 18 },
      ]
  
  
      let result = [];
      let startNumber = (currentPage - 1) * itemsPerpage;
      let endNumber = (currentPage) * itemsPerpage;
  
      totalDatas.map((item, index) => {
        if ((index >= startNumber) && (index < endNumber)) {
          result.push(item);
        } else {
          // Do-nothing
        }
      })
  
  
      return {
        currentPage: currentPage,
        itemsPerpage: itemsPerpage,
        totalCounts: totalDatas.length,
        list: result,
      }
    }
  }

• 自定义指令，dynamic-column-width.directivej.ts 

  import { Directive, ElementRef, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[appDynamicColumnWidth]'
  })
  export class DynamicColumnWidthDirective {
    public elem = null;
    public mouseDown: boolean = false;
    public oldX: number = 0;
    public oldWidth: number = 0;
    public  number = 0;
  
    constructor(private el: ElementRef) {
      
    }
  
    ngOnInit(): void {
     
    }
  
    @HostListener('mousedown', ['$event'])
    onMousedown(e) {
      // 判断当前点击的是否是单元格元素
      if (this.el != null) {
        if (e.offsetX > this.el.nativeElement.offsetWidth - 15) {
          this.el.nativeElement.mouseDown = true;
          this.el.nativeElement.oldX = e.x;
          this.el.nativeElement.oldWidth = this.el.nativeElement.offsetWidth;
        }
      } else {
        // Do-nothing
      }
    }
  
  
  
    @HostListener('mouseup', ['$event'])
    onMouseup(e) {
      if (this.el != null) {
        this.el.nativeElement.mouseDown = false;
        this.el.nativeElement.style.cursor = 'default';
      }
    }
  
  
  
    @HostListener('mousemove', ['$event'])
    onMousemove(e) {
      if(this.el != null){
        if (e.offsetX > this.el.nativeElement.offsetWidth - 15) {
          this.el.nativeElement.style.cursor = 'col-resize';
        } else {
          this.el.nativeElement.style.cursor = 'default';
        }
      }
  
      if (this.el.nativeElement.mouseDown != null && this.el.nativeElement.mouseDown == true) {
        this.el.nativeElement.style.cursor = 'default';
        let wid = 0;
        if (this.el.nativeElement.oldWidth + (e.x - this.el.nativeElement.oldX) > 0) {
          wid = this.el.nativeElement.oldWidth + (e.x - this.el.nativeElement.oldX);
        }
        this.el.nativeElement.style.width = wid + 'px';
        this.el.nativeElement.style.cursor = 'col-resize';
        // ng-zorro table 列宽可以根据thead每个单元格的宽度自动适配，所以不用再做修改
      } else {
        // console.log("无所谓!");
      }
    }
  }

• 在模块中依赖注入自定义指令，components.module.ts 

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { ComponentsRoutingModule } from './components-routing.module';
  import { ComponentsComponent } from './components.component';
  import { NgZorroAntdModule } from 'ng-zorro-antd';
  import { DynamicColumnWidthDirective } from '../directives/dynamic-column-width.directive';
  
  @NgModule({
    imports: [
      CommonModule,
      ComponentsRoutingModule,
      NgZorroAntdModule.forRoot(),
    ],
    declarations: [ComponentsComponent,DynamicColumnWidthDirective]
  })
  export class ComponentsModule { }

  注意：

• 自定义指令需要在待使用组件所在模块module文件中引入，如上。
• 如果存在多个组件都需要使用该自定义指令，请将新建一个公共模块，在公共模块中依赖注入自定义指令，在待使用组件中依赖注入公共模块。

四、运行截图

五、源码

　　源码请参考 https://github.com/guojije/dynamicColumn