一个简单的Vue.js插件，可通过拖放来调整表列的大小。

安装和下载：

# NPM
$ npm install vue-columns-resizable --save

使用：

1.main.js

import VueColumnsResizable from './plugins/vue-columns-resizable';
Vue.use(VueColumnsResizable);

2. *.vue

<table border="1" class="table" v-columns-resizable>
<thead>
<tr>
<th width="50%">name</th>
<th width="25%">age</th>
<th width="25%">gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>20</td>
<td>male</td>
</tr>
<tr>
<td>Emma</td>
<td>18</td>
<td>female</td>
</tr>
<tr>
<td>Peter</td>
<td>21</td>
<td>male</td>
</tr>
</tbody>
</table>

3.调整广告大小

<table border="1" class="table">
<thead v-columns-resizable>
<tr>
<th width="50%">name</th>
<th width="25%">age</th>
<th width="25%">gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>20</td>
<td>male</td>
</tr>
<tr>
<td>Emma</td>
<td>18</td>
<td>female</td>
</tr>
<tr>
<td>Peter</td>
<td>21</td>
<td>male</td>
</tr>
</tbody>
</table>

---

官网：https://github.com/Fuxy526/vue-columns-resizable

演示：https://www.vue365.cn/code_demo.php?id=406

GitHub下载：https://github.com/Fuxy526/vue-columns-resizable/archive/master.zip