自定义实现table宽度实现可拖动调整

1、安装
npm install vue-columns-resizable-vuetify --save

2、在main.js引入
import VueColumnsResizableVuetify from './plugins/vue-columns-resizable-vuetify';
 
Vue.use(VueColumnsResizableVuetify);

3、应用
<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>