插件名称 | 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>