ElementUI Table 拖动列改变宽度事件 （@header-dragend）

问题场景 : elementUI 的 Table 的列支持拖动改变列宽，实际有这种场景，拖拽列要求限制在一定范围内，拖动距离在期望的最大值和最小值之间

思路：

1. 查看官方文档发现列属性中只提供了 ‘min-width’ ，但是只写min-width,并不能达到min-width的效果；
2. 尝试写 max-width 一样没起到 max-width的作用；
3. 既然属性不起作用，elementUI一定会留一条活路吧，没错从 ’事件‘ 入手，查看 Table Event 中，有你想要的：
   

header-dragend (newWidth,oldWidth,column,event) 事件是table的表头改变宽度时触发的事件，回调里面参数依次是 拖拽后的宽度，拖拽之前的宽度，拖拽列对象，事件对象；

• 其中要想控制拖拽范围，先得来个范围标准，我是在列上面利用min-width(最好写成百分比，可适配多分辨率)

<el-table
      border
      v-show="mlist.length > 0"
      class="contractBook"
      ref="table"
      :data="mlist"
      empty-text=" "
      @row-click="rowClick"
      @header-dragend="changeColWidth"    //绑定事件
      style="width: 100%"
    >
      <el-table-column prop="name" align="center" label="姓名" min-width="21%">  / /min-width写成百分比
       ...
      </el-table-column>
       ...
    </el-table>

• 事件（用来做拖拽的边界处理）
  
  
  可以了现在可以做到"进退有度"了