表格拖拽改变列宽

最新推荐文章于 2024-08-14 21:19:42 发布

web_hj

最新推荐文章于 2024-08-14 21:19:42 发布

阅读量1.4k

点赞数

分类专栏： vue js

本文链接：https://blog.csdn.net/web_hj/article/details/90725704

版权

这是一个使用Vue实现的表格组件，允许用户通过拖拽表格列头的子元素来改变列宽。代码中定义了`splitDown`方法处理鼠标按下事件，计算初始位置和宽度，并在鼠标移动时实时更新列宽和整个表格的宽度。当鼠标松开时，恢复默认的鼠标样式并移除鼠标移动事件监听器。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div>
      <table>
        <thead>
        <tr>
          <th v-for="item,index in heads" :id="'th_'+index" style="width:120px;">
            <div>
              {
 {item}}
              <sub class="split" @mousedown="splitDown($event,index)"></sub>        //sub 是鼠标拖拽的对象
            </div>
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="i in 15">
          <td v-for="item in heads">
            <div style="width:100px;">
              {
 {item+i}}
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "team",
    data() {
      return {