vue3实现多表头列表el-table,拖拽,鼠标滑轮滚动条优化

需求背景

需要实现多表头列表的用户体验优化

解决效果

index.vue

javascript 复制代码
<!--/**
* @author: liuk
* @date: 2024-07-03
* @describe:**** 多表头列表
*/-->
<template>
  <el-table ref="tableRef" height="calc(100% - 80px)" :data="listData" border v-loading="loading" stripe
            style="width: 100%" :resizable="false" @mousedown="mouseDownHandler" @mouseup="mouseUpHandler"
            @mousemove="mouseMoveHandler" element-loading-text="数据加载中...">
    <el-table-column label='时间' prop="tiem" width="145" fixed align="center" v-if="listData.length">
      <template #default="scope">
        {{ moment(scope.row['time']).format('YYYY/MM/DD HH:mm') }}
      </template>
    </el-table-column>
    <el-table-column v-for="(item, index) in keyArr" :key="index" :label=item.name :prop=item.props
                     align="center" :width="item.name.length * 12 + 20 > 110 ? item.name.length * 12 + 20 : 110">
      <template #default="scope">
        <el-input class="cell-input" @change="addEditItem(scope.row[item.props])" :disabled="!disadledFalg"
                  v-model.number="scope.row[item.props].rainstormValue"/>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {reactive, toRefs} from "vue"
import moment from "moment";

const model = reactive({
  keyArr: [...] // {name: '名称', props: 'name'}
  listData: [],
  loading: false,
})
const { keyArr,listData,loading} = toRefs(model)

onMounted(() => {
  addTableWheel()
})

// 列表长表头拖拽优化
const tableRef = ref(null)
const mouseFlag = ref(false)
const mouseOffset = ref(0)
const addTableWheel = () => {
  tableRef.value.scrollBarRef.wrapRef.addEventListener('wheel', event => {
    event.preventDefault()
    const delta = event.deltaX || event.deltaY
    tableRef.value.scrollBarRef.wrapRef.scrollLeft += delta
  })
}
const mouseDownHandler = (e) => {
  mouseOffset.value = e.clientX;
  mouseFlag.value = true;
}
const mouseUpHandler = () => {
  mouseFlag.value = false;
}
const mouseMoveHandler = (e) => {
  let divData = tableRef.value.scrollBarRef.wrapRef;
  if (mouseFlag.value) {
    divData.scrollLeft -= (-mouseOffset.value + (mouseOffset.value = e.clientX));
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-table) {
  .el-table__inner-wrapper {
 	height: 100% !important;
  }
  .el-scrollbar__thumb {
    background: #151515;
  }
}
</style>
相关推荐
qczg_wxg3 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz4 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
大怪v4 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山5 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin5 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip5 小时前
结合Worker通知应用更新
前端·javascript
Gazer_S5 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
_Rookie._6 小时前
vue3 使用css变量
前端·javascript·html
良木林8 小时前
JS函数进阶
开发语言·前端·javascript
小薛博客8 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins