Vue指令,用于调整表列的大小 - vue-columns-resizable

Vue指令,用于调整表列的大小 - vue-columns-resizable
插件名称 vue-columns-resizable
发布时间 2020年5月2日
插件作者 Fuxy526

一个简单的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>