ngzorro 自定义指令操作 nz-table 列拖动缩放

创建指令

ng g d drap-table-column

import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';@Directive({selector: '[appDrapTableColumn]'
})export class DrapTableColumnDirective implements AfterViewInit {@Input('appDrapTableColumn') columnWidths: string[];@Input() usePixel = false;constructor(private $element: ElementRef<HTMLTableElement>) {}ngAfterViewInit() {const el = (() => {let result = this.$element.nativeElement;if (result.tagName === 'NZ-TABLE') {result = result.querySelector('table');}if (result.tagName !== 'TABLE') {throw new TypeError('Must be a TABLE element');}if (!result.tHead) {throw new TypeError('Must have a THEAD element');}return result;})();el.classList.add('table-resizable');const tr = el.tHead.rows[0];if (!tr) {throw new TypeError('Must have at least one TR element inside THEAD element');}setTimeout(() => {const ths = Array.from(tr.cells) as HTMLTableHeaderCellElement[];if (ths.length <= 1) { return; }--ths.length; // 最后一个方格总是自动列宽的（用于占满整行）if (!Array.isArray(this.columnWidths)) {this.columnWidths = new Array(ths.length).fill('');} else {this.columnWidths.length = ths.length;this.columnWidths.forEach((x, i, arr) => {if (!x) {arr[i] = '';}});}ths.forEach(th => {if (th.classList.contains('no-resize')) {return;}if (this.columnWidths[th.cellIndex]) {th.width = this.columnWidths[th.cellIndex];}const i = document.createElement('i');i.classList.add('resize-indicator');th.appendChild(i);i.addEventListener('mousedown', e => {if (e.button === 1) { // 鼠标中键th.width = '';return;}if (e.button !== 0) {return;}const startX = e.pageX;const startThWidth = th.clientWidth;document.body.classList.add('table-resizing');let mousemoveHandler;document.body.addEventListener('mousemove', mousemoveHandler = e => {if (e.button !== 0) {return;}const pixel = e.pageX - startX + startThWidth;if (this.usePixel) {th.width = pixel + '';} else {th.width = pixel / tr.offsetWidth * 100 + '%';}this.columnWidths[th.cellIndex] = th.width;});document.body.addEventListener('mouseup', e => {if (e.button !== 0) {return;}document.body.removeEventListener('mousemove', mousemoveHandler);document.body.classList.remove('table-resizing');}, { once: true });});});});}
}

缩放样式

.table-resizable th {position: relative;
}body.table-resizing {cursor: col-resize !important;user-select: none;
}.resize-indicator {display: block;position: absolute;top: 0;right: -5px;width: 9px;height: 100%;cursor: col-resize;
}

在app.module.ts中引入自定义指令

import {NgModule} from '@angular/core';
import {DrapTableColumnDirective} from './drap-table-column.directive';@NgModule({declarations: [DrapTableColumnDirective],exports: [DrapTableColumnDirective],providers: []
})
export class DirectiveModule { }

在app.module.ts中引入自定义指令

imports: [DirectiveModule
],

使用

<nz-table [appDrapTableColumn]></nz-table>

ngzorro 自定义指令操作 nz-table 列拖动缩放相关推荐

oracle adf 自定义lov,Oracle ADF table列自定义过滤组件的方法
shortDesc="#{bindings.Pay0detailVO1.hints.Vsource.tooltip}" id="soc41" contentSt ...
bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...
angular ngzorro 表格用自定义指令实现自由缩放列宽
版本 "@angular/core": "~10.0.3" "ng-zorro-antd": "^10.2.2" 实现思 ...
vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
Bootstrap Table列宽拖动的方法
Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依 ...
iview 自定义指令实现Table左右横向拖拽
有时候表格内容会很多,需要横向滚动查看右边的内容,又不想到底部拖动滚动条,如果能直接在内容中拖动就好了,这个时候就可以用 vue 的自定义指令来实现了. 为了以后扩展指令方便,创建 directive ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
Vue自定义指令原来这么简单
本篇学习目标能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件目标: 多个组件使用同一个挂载点,并动态切换,这就是动 ...
Day06_动态组件_插槽_自定义指令_tabbar案例
Day06_动态组件_插槽_自定义指令_tabbar案例文章目录 Day06_动态组件_插槽_自定义指令_tabbar案例知识点自测今日学习目标 1. 组件进阶 1.0 组件进阶 - 动态组件 ...

ngzorro 自定义指令操作 nz-table 列拖动缩放

创建指令

缩放样式

在app.module.ts中引入自定义指令

在app.module.ts中引入自定义指令

使用

ngzorro 自定义指令操作 nz-table 列拖动缩放相关推荐

最新文章

热门文章