vue3鼠标拖拽滑动效果

使用element-plus在页面里写一个表格，表格有横向和竖向滚动条，想实现表格可以鼠标拖拽滚动。
可以用vue3-dragscroll来实现，首先需要在css里隐藏掉表格的滚动条，将表格的父级设置固定的宽高，并在父级标签上增加v-dragscroll指令。

<template>
  <div class="data-table" v-dragscroll>
    <el-table
      :data="rowData"
      border
      :show-header="false"
      table-layout="auto"
      size="small"
    >
      <el-table-column
        :prop="item.prop"
        v-for="item of columns"
        :key="item.prop"
        :fixed="item.fixed ? true : false"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDataTable } from './scripts/data-table'
const { columns, rowData } = useDataTable()
</script>

<style scoped lang="scss">
.data-table {
  width: 630px;
  height: 320px;
  overflow: auto;
  border: solid 1px #ebeef5;
  
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(#101F1C, 0.1);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(144,147,153,.5);
    background-clip: padding-box;
    min-height: 6px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color .3s;
    cursor: pointer;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144,147,153,.3);
  }
}
:deep .el-table {
  width: fit-content;
  max-width: none;
  border: none;
}
:deep .el-scrollbar__bar.is-vertical {
  width: 0;
}
:deep .data-table thead {
  height: 0;
  display: block;
}
:deep .hide_line .el-table td.el-table__cell {
  border-bottom: none;
}

:deep .data-table .el-table--small .el-table__cell {
  padding: 0;
}
:deep .data-table .el-table--small .cell {
  padding: 4px 8px;
}
:deep .data-table .hover .cell {
  border-left: 1px solid blue;
  border-right: 1px solid blue;
}

</style>

全局安装vue3-dragscroll
npm install vue3-dragscroll

在main.ts文件内引入

import { createApp } from 'vue'
import '@/style/index.css'
import App from './App.vue'
import router from './router'
import Vue3Dragscroll from 'vue3-dragscroll'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' 

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus, { locale: zhCn })
app.use(Vue3Dragscroll)

app.mount('#app')