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

最新推荐文章于 2024-03-27 20:58:57 发布

Liaochjser

最新推荐文章于 2024-03-27 20:58:57 发布

阅读量962

点赞数

分类专栏： javascript vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/liaoxianhua888/article/details/126787038

版权

vue 同时被 2 个专栏收录

37 篇文章

订阅专栏

javascript

34 篇文章

订阅专栏

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>