Drag-cell-resize NPM

dragCellResize

拖拽表格列宽，支持Vue指令

安装

npm & yarn

npm install drag-cell-resize

yarn add drag-cell-resize

cdn

umd版本（包含指令和DragCellResize类）:

<script src="https://unpkg.com/drag-cell-resize/dist/index.min.js"></script>

var版本（仅包含DragCellResize类）：

<script src="https://unpkg.com/drag-cell-resize/dist/index.var.js"></script>

使用方式

在Vue中使用

Vue Demo

1.作为指令使用

import Vue from 'vue'
import directive from 'drag-cell-resize'
Vue.use(directive)

<template>
    <table v-drag-cell-resize>...</table>
</template>

指令不仅仅可以绑定在table中,只要其包含table表格都可以绑定,例如:

<template>
    <div v-drag-cell-resize>
      <table>...</table>
    </div>
</template>

2.直接调用DragCellResize类

<template>
    <table refs="table">...</table>
</template>
<script >
    import {DragCellResize} from 'drag-cell-resize'
   export default {
       mounted(){
          new DragCellResize(this.$refs['table'])
       }
   }   
</script>

不使用Vue的情况下

<html>
<body>
    <table id="table">...</table>
</body>
</html>
<script src="https://unpkg.com/drag-cell-resize/dist/index.var.js"></script>
<script >
    // index.var.js中仅仅只有DragCellResize类
    new DragCellResize(document.getElementById('table'))
</script>

DragCellResize类

指令本质上就是在bind时实例化了DragCellResize类.

注：在使用v-drag-cell-resize的时候,由于某些情况下thead或者整个table都还未被渲染(例如使用了v-if),指令无法在bind或insert钩子上获取到dom对象.所以如果在bind阶段未找到dom的话,指令会尝试在update钩子上获取表格的dom对象及绑定事件. 尽管用到了update钩子，会多次触发指令绑定,但是外部用了Map来缓存dom和DragCellResize的关系,.所以DragCellResize一旦被实例化后不会便不会再重复实例化和绑定事件.

构造参数 new DragCellResize(el,callbakc,isCustom)

参数	释义	是否必填
el	欲绑定的Dom元素，不限于表格,只要包含表格即可	是
callback	完成拖拽后的回调函数/自定义处理拖拽。可在拖拽后执行某些操作	否（如果isCustom为true,callback必传）
isCustom	是否自定义处理拖拽操作，如果为true，拖拽的后不会设置列宽，交由callback处理	否

Demo