扩展ElementPlus 组件

使用ElementPLus Virtualized Table 虚拟化表格时发现在适配移动端时无法滑动，没有行数据选中，文档显示还在试验阶段，自己拓展了一下，记录以备后用

ELTableV2Extend/index.vue

<template>
  <div>
    <el-table-v2
      v-bind="props"
      @click="getRowClick"
      @touchstart="touchStart"
      @touchmove="touchMove"
    ></el-table-v2>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { ElTableV2 } from 'element-plus'

const tableProps = {
  ...ElTableV2.props
}

export default defineComponent({
  name: 'ElTableV2M1',
  props: tableProps,
  install: ElTableV2.install,
  setup(props, ctx) {
    let elTableSetup, tarchStartScreenY, tarchStartScreenX, taragetDom
    onMounted(() => {
      taragetDom = document.querySelector('.el-table-v2__body div')
    })
    let docScrollTop = taragetDom?.scrollTop || 0
    let docScrollLeft = taragetDom?.scrollLeft || 0
    // 调用 ElTableV2 的 setup 方法
    if (ElTableV2.setup) {
      elTableSetup =
        ElTableV2.setup(tableProps, {
          slots: ctx.slots,
          expose: ctx.expose,
          attrs: ctx.attrs,
          emit: ctx.emit
        }) || {}
    }

    // 定义自己的 getRowClick 方法
    const getRowClick = (event: any) => {
      let row
      switch (event.target.__vueParentComponent?.type?.name) {
        case 'TableV2Cell':
        case 'CellRenderer':
          row = event.target.__vueParentComponent?.attrs
          if (row) {
            ctx.emit('haldClick', row.rowData, row.rowIndex)
          }
          break
        default:
          break
      }
    }
    const touchStart = (event: any) => {
      tarchStartScreenY = event.changedTouches[0].screenY
      tarchStartScreenX = event.changedTouches[0].screenX
      docScrollTop = taragetDom?.scrollTop || 0
      docScrollLeft = taragetDom?.scrollLeft || 0
    }
    const touchMove = (event: any) => {
      // 移动端操作反着来 + 1是取反时有丢失精度的问题
      let moveY = ~(event.changedTouches[0].screenY - tarchStartScreenY + 1)
      let moveX = ~(event.changedTouches[0].screenX - tarchStartScreenX + 1)
      taragetDom?.scrollTo(docScrollLeft + moveX, docScrollTop + moveY)
    }
    // 合并 ElTableV2 的 setup 返回值和自定义的逻辑
    return {
      ...elTableSetup,
      getRowClick,
      touchStart,
      touchMove,
      tableProps,
      props
    }
  }
})
</script>

components/index.ts

import { App } from 'vue'
import ElTableV2Extend from './ElTableV2Extend/index.vue'

export default {
  install(Vue: App) {
    Vue.component('ElTableV2M1', ElTableV2Extend)
  }
}

main.ts

import globalComponents from '@/components'
App.use(globalComponents)

使用

<el-auto-resizer>
  <template #default="{ height, width }">
    <el-table-v2-m1
      :columns="columns"
      :data="data"
      :width="width"
      :height="height"
      fixed
      @haldClick="click"
    >
    </el-table-v2-m1>
  </template>
</el-auto-resizer>