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>
相关推荐
midsummer_woo30 分钟前
基于springboot的在线教育系统(源码+论文)
vue.js·spring boot·mysql
Fly-ping1 小时前
【前端】JavaScript 的事件循环 (Event Loop)
开发语言·前端·javascript
在逃的吗喽2 小时前
黑马头条项目详解
前端·javascript·ajax
JHCan3333 小时前
一个没有手动加分号引发的bug
前端·javascript·bug
天涯学馆4 小时前
为什么越来越多开发者偷偷用上了 Svelte?
前端·javascript·svelte
拾光拾趣录4 小时前
为什么浏览器那条“假进度”救不了我们?
前端·javascript·浏览器
香菜狗4 小时前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
拾光拾趣录4 小时前
为什么我们要亲手“捏”一个 Vue 项目?
前端·vue.js·性能优化
油丶酸萝卜别吃5 小时前
SSE与Websocket有什么区别?
前端·javascript·网络·网络协议
27669582925 小时前
拼多多小程序 anti_content 分析
java·javascript·python·node·拼多多·anti-content·anti_content