n20-common-lib 3.0.22 → 3.0.23

package/src/components/TablePro/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <div style="height: 100%; position: relative">
+  <div class="table-pro-wrapper" style="height: 100%; position: relative">
+    <!-- 骨架屏 - 仅覆盖内容区域，不覆盖表头 -->
+    <div v-if="loading" class="table-pro-skeleton">
+      <div class="skeleton-row" v-for="n in skeletonRows" :key="'skeleton-' + n">
+        <div class="skeleton-cell skeleton-checkbox"></div>
+        <div class="skeleton-cell" v-for="col in skeletonCols" :key="'col-' + col"></div>
+      </div>
+    </div>
     <vxe-table
       ref="vxeTable"
       :key="colsKey"
@@ -32,8 +39,6 @@
         multiple: false,
         remote: true,
         trigger: 'cell',
-        iconAsc: 'n20-icon-daoxu',
-        iconDesc: 'n20-icon-shunxu',
         ...$attrs.sortConfig,
         ...$attrs['sort-config']
       }"
@@ -42,12 +47,16 @@
         iconNone: 'n20-icon-xiala-moren',
         iconMatch: 'n20-icon-xiala-moren'
       }"
+      :merge-cells="mergeCells"
       v-bind="Object.assign({ size: size }, $attrs, sizeBind)"
       v-on="$listeners"
       @sort-change="(val) => customSortMethod(val)"
       @filter-change="filterChange"
       @checkbox-change="handleSelectionChange"
       @cell-click="handleCellClick"
+      @cell-mouseenter="handleCellMouseEnter"
+      @cell-mouseleave="handleCellMouseLeave"
+      @scroll="handleTableScroll"
     >
       <template v-for="(item, i) in _columns">
         <slot v-if="item.slotName" :name="item.slotName" :column="item"></slot>
@@ -77,16 +86,26 @@
         >
           <template #header="{ $table, checked, indeterminate, disabled }">
             <span class="custom-checkbox" @click.stop="toggleAll($table, disabled)">
-              <el-checkbox v-if="indeterminate" :key="key" :indeterminate="indeterminate" :disabled="disabled" />
-              <el-checkbox v-else-if="checked" :key="key" :value="checked" :disabled="disabled" />
-              <el-checkbox v-else :key="key" :value="checked" :disabled="disabled" />
+              <el-checkbox
+                v-if="indeterminate"
+                :key="key + '_header_indeterminate'"
+                :indeterminate="indeterminate"
+                :disabled="disabled"
+              />
+              <el-checkbox v-else-if="checked" :key="key + '_header_checked'" :value="checked" :disabled="disabled" />
+              <el-checkbox v-else :key="key + '_header_unchecked'" :value="checked" :disabled="disabled" />
             </span>
           </template>
           <template #checkbox="{ $table, row, checked, indeterminate, disabled }">
             <span class="custom-checkbox" @click.stop="toggleChecked($table, row, disabled)">
-              <el-checkbox v-if="indeterminate" :key="key" :indeterminate="indeterminate" :disabled="disabled" />
-              <el-checkbox v-else-if="checked" :key="key" :value="checked" :disabled="disabled" />
-              <el-checkbox v-else :key="key" :value="checked" :disabled="disabled" />
+              <el-checkbox
+                v-if="indeterminate"
+                :key="key + '-row-indeterminate'"
+                :indeterminate="indeterminate"
+                :disabled="disabled"
+              />
+              <el-checkbox v-else-if="checked" :key="key + '-row-checked'" :value="checked" :disabled="disabled" />
+              <el-checkbox v-else :key="key + '-row-unchecked'" :value="checked" :disabled="disabled" />
             </span>
           </template>
         </vxe-column>
@@ -109,7 +128,7 @@
         </vxe-colgroup>
         <vxe-column
           v-else
-          :key="'vxe-table-' + i"
+          :key="'vxe-table-base__column' + i"
           :class-name="`${item.wrap && `vxe-table-custom-wrap`} ${item.bold && `font-w600`}`"
           :formatter="item.formatter ? item.formatter : 'formatName'"
           :filters="item.filters"
@@ -117,15 +136,105 @@
           :title="item.label"
           :field="item.prop"
           v-bind="item"
-        />
+        >
+          <template #header="{ column }">
+            <div
+              class="flex-box flex-v flex-c"
+              @mouseenter="hoverHeaderProp = item.prop"
+              @mouseleave="hoverHeaderProp = null"
+            >
+              <slot name="header" :column="column">{{ column.title }}</slot>
+              <i
+                v-if="item.tooltip"
+                class="n20-icon-xinxitishi vxe-table--column__icon m-l-ss"
+                v-title="item.tooltip"
+              ></i>
+              <!-- 已固定列（fixed='left'）：hover 时显示 lock 图标，点击取消固定 -->
+              <i
+                v-if="item.fixed === 'left'"
+                class="iconfont icon-lock vxe-table--column__icon m-l-ss pointer color-primary"
+                @click.stop="unlockColumn(item)"
+              ></i>
+              <!-- 未固定列（且非静态列）：hover 时显示 unlock 图标，点击设为固定 -->
+              <i
+                v-if="!item.fixed && !item.static"
+                v-show="hoverHeaderProp === item.prop"
+                class="iconfont icon-unlock vxe-table--column__icon m-l-ss pointer"
+                @click.stop="lockColumn(item)"
+              ></i>
+            </div>
+          </template>
+        </vxe-column>
       </template>
+      <vxe-column
+        fixed="right"
+        header-class-name="fixed-column__static"
+        :min-width="showColumn && showSetsize ? 80 : 50"
+      >
+        <div slot="header">
+          <i
+            v-if="showColumn"
+            v-title="$lc('设置显示列')"
+            class="iconfont icon-system-solution pointer"
+            @click="$emit('visible-column')"
+          ></i>
+          <tableSetSize v-if="showSetsize" :size="sizeC" v-bind="$attrs" @update:size="sizeUp" @resize="sizeSet" />
+        </div>
+      </vxe-column>
       <template #empty>
         <slot name="empty">
           <empty type="empty" :content="$lc('暂无数据')" :height="200" :width="200" />
         </slot>
       </template>
     </vxe-table>
-    <tableSetSize v-if="showSetsize" :size="sizeC" v-bind="$attrs" @update:size="sizeUp" @resize="sizeSet" />
+    <!-- 操作列的悬浮按钮组 -->
+    <transition name="hover-btns-fade">
+      <div
+        v-if="showHoverBtns && visibleHoverBtns.length > 0"
+        class="table-hover-btns"
+        :style="hoverBtnsStyle"
+        @mouseenter="handleBtnGroupEnter"
+        @mouseleave="handleBtnGroupLeave"
+      >
+        <div class="hover-btns-wrapper">
+          <el-button
+            v-for="(btn, idx) in displayHoverBtns"
+            :key="'display-' + idx"
+            :type="btn.type || 'primary'"
+            :size="btn.size || 'mini'"
+            :icon="btn.icon"
+            :disabled="btn.disabled"
+            :class="[btn.class]"
+            @click.stop="handleHoverBtnClick(btn, $event)"
+          >
+            {{ btn.label }}
+          </el-button>
+          <!-- 更多按钮下拉菜单 -->
+          <el-dropdown
+            v-if="moreHoverBtns.length > 0"
+            class="hover-btns-more"
+            @command="handleMoreBtnCommand"
+            @visible-change="handleDropdownVisibleChange"
+          >
+            <el-button type="primary" size="mini">
+              {{ $lc('更多') }}<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(btn, idx) in moreHoverBtns"
+                :key="'more-' + idx"
+                :command="btn"
+                :disabled="btn.disabled"
+              >
+                <span :class="btn.type === 'danger' ? 'color-danger' : ''">
+                  {{ btn.label }}
+                </span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -133,7 +242,7 @@
 import empty from '../Empty'
 import tableSetSize from '../TableSetSize/index.vue'
 import { $lc } from '../../utils/i18n/index.js'
-import XEUtils from 'xe-utils'
+
 const renderer = {
   name: 'renderer',
   props: {
@@ -197,6 +306,10 @@ export default {
         return forbidSelect
       }
     },
+    showColumn: {
+      type: Boolean,
+      default: true
+    },
     // 数据更新时是否自动清空已选
     clearSelect: {
       type: Boolean,
@@ -210,6 +323,63 @@ export default {
     isAutoWidth: {
       type: Boolean,
       default: true
+    },
+    // 合并单元格配置，格式: [{ row: 0, col: 0, rowspan: 2, colspan: 0 }]
+    mergeCells: {
+      type: Array,
+      default: () => []
+    },
+    // 全选时是否排除被合并的行（从属行）
+    excludeMergedRows: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示骨架屏加载状态
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 骨架屏行数
+    skeletonRows: {
+      type: Number,
+      default: 10
+    },
+    // 骨架屏列数
+    skeletonCols: {
+      type: Number,
+      default: 6
+    },
+    // 悬浮按钮列表配置
+    // 格式: [{ command: 'edit', label: '编辑', type: 'text', isHas: 'edit', click: (row) => {} }]
+    btnList: {
+      type: Array,
+      default: () => []
+    },
+    // 权限检查函数，返回当前行允许显示的按钮 key 列表
+    // 格式: (row, btns) => ['edit', 'delete'] 或 true（显示所有）或 false（不显示任何）
+    hoverBtnsPermission: {
+      type: Function,
+      default: null
+    },
+    // 悬浮按钮组是否显示分隔符
+    hoverBtnsDivider: {
+      type: Boolean,
+      default: true
+    },
+    // 悬浮按钮组显示延迟（毫秒）
+    hoverBtnsDelay: {
+      type: Number,
+      default: 50
+    },
+    // 悬浮按钮组隐藏延迟（毫秒）
+    hoverBtnsHideDelay: {
+      type: Number,
+      default: 150
+    },
+    // 悬浮按钮组最大显示数量，超过则收起到"更多"下拉菜单
+    hoverBtnsMaxShow: {
+      type: Number,
+      default: 4
     }
   },
   data() {
@@ -218,15 +388,61 @@ export default {
       colsKey: 0,
       sizeC: localStorage.getItem('table-size') || _this.size,
       sizeBind: undefined,
-      key: 0
+      setTableSize: false,
+      key: 0,
+      // 悬浮按钮组相关状态
+      hoverRowData: null, // 当前悬停行数据
+      hoverRowIndex: -1, // 当前悬停行索引
+      showHoverBtns: false, // 是否显示悬浮按钮组
+      hoverBtnsPosition: { top: 0, left: 0, width: 0 }, // 按钮组位置
+      hoverShowTimer: null, // 显示延迟定时器
+      hoverHideTimer: null, // 隐藏延迟定时器
+      isHoverOnBtnGroup: false, // 鼠标是否在按钮组上
+      isDropdownVisible: false, // "更多"下拉菜单是否展开
+      hoverHeaderProp: null // 当前悬停表头列的 prop
     }
   },
   computed: {
-    _columns() {
-      if (this.isAutoWidth) {
-        return this.calcColumnWidth(this.columns)
-      } else {
-        return this.columns
+    _columns: {
+      get() {
+        if (this.isAutoWidth) {
+          return this.calcColumnWidth(this.columns)
+        } else {
+          return this.columns
+        }
+      },
+      set(val) {
+        return val
+      }
+    },
+    // 计算当前行可见的悬浮按钮
+    visibleHoverBtns() {
+      if (!this.hoverRowData || !this.btnList || this.btnList.length === 0) {
+        return []
+      }
+      return this.btnList.filter((btn) => this.hasBtn(btn.isHas, this.hoverRowData))
+    },
+    // 直接显示的按钮（不超过阈值）
+    displayHoverBtns() {
+      if (this.visibleHoverBtns.length > this.hoverBtnsMaxShow) {
+        return this.visibleHoverBtns.slice(0, this.hoverBtnsMaxShow - 1)
+      }
+      return this.visibleHoverBtns
+    },
+    // 收起到"更多"下拉菜单的按钮
+    moreHoverBtns() {
+      if (this.visibleHoverBtns.length > this.hoverBtnsMaxShow) {
+        return this.visibleHoverBtns.slice(this.hoverBtnsMaxShow - 1)
+      }
+      return []
+    },
+
+    // 悬浮按钮组样式
+    hoverBtnsStyle() {
+      return {
+        top: `${this.hoverBtnsPosition.top}px`,
+        right: 0, // 固定在右侧设置列按钮左边
+        height: `${this.hoverBtnsPosition.height}px`
       }
     }
   },
@@ -248,16 +464,84 @@ export default {
   activated() {
     this.$refs.vxeTable.loadData(this.data)
   },
-  mounted() {},
+  beforeDestroy() {
+    // 清理定时器
+    this.clearHoverTimers()
+  },
   methods: {
-    // 全选
+    // 锁定列：将该列 fixed 设为 'left'，直接修改 prop 对象并刷新表格
+    lockColumn(item) {
+      if (item.fixed || item.static) return
+      this.$set(item, 'fixed', 'left')
+      // 手动触发 colsKey 刷新，让 vxe-table 重新渲染列配置
+      this.colsKey = this.colsKey + 1
+    },
+    // 解锁列：移除 fixed 属性，将该列恢复为普通列
+    unlockColumn(item) {
+      if (item.fixed !== 'left') return
+      this.$delete(item, 'fixed')
+      // 手动触发 colsKey 刷新，让 vxe-table 重新渲染列配置
+      this.colsKey = this.colsKey + 1
+    },
+    // 判断按鈕是否显示
+    hasBtn(isHas, row) {
+      if (isHas === undefined || isHas === null) {
+        return true
+      } else if (typeof isHas === 'boolean') {
+        return isHas
+      } else if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return this.$has(isHas)
+      } else if (typeof isHas === 'function') {
+        return isHas(row)
+      }
+    },
+    // 全选/反选
     toggleAllSelection() {
-      if (this.$refs.vxeTable) {
-        this.$refs.vxeTable.setAllCheckboxRow(true)
-        // 得手动触发
-        this.handleSelectionChange()
+      if (!this.$refs.vxeTable) return
+      const allData = this.data || []
+      // 获取合并行索引集合
+      const mergedIndexes =
+        this.excludeMergedRows && this.mergeCells && this.mergeCells.length > 0 ? this.getMergedRowIndexes() : new Set()
+      // 筛选出可选择的行（排除合并从属行 + 排除禁止选择的行）
+      const selectableRows = allData.filter((row, index) => {
+        if (mergedIndexes.has(index)) return false
+        if (typeof this.forbidSelect === 'function' && this.forbidSelect({ row }) === true) return false
+        return true
+      })
+      // 判断当前可选行是否已全部选中
+      const checkedRows = this.$refs.vxeTable.getCheckboxRecords(false)
+      const checkedSet = new Set(checkedRows)
+      const isAllChecked = selectableRows.length > 0 && selectableRows.every((row) => checkedSet.has(row))
+      if (isAllChecked) {
+        // 已全选，则取消可选行的选中状态
+        selectableRows.forEach((row) => {
+          this.$refs.vxeTable.setCheckboxRow(row, false)
+        })
+      } else {
+        // 未全选，则选中所有可选行
+        selectableRows.forEach((row) => {
+          this.$refs.vxeTable.setCheckboxRow(row, true)
+        })
       }
+      // 得手动触发
+      this.handleSelectionChange()
     },
+    // 获取被合并的从属行索引集合
+    getMergedRowIndexes() {
+      const mergedIndexes = new Set()
+      if (this.mergeCells && this.mergeCells.length > 0) {
+        this.mergeCells.forEach((cell) => {
+          if (cell.rowspan > 1) {
+            // 从 row+1 到 row+rowspan-1 都是被合并的从属行
+            for (let i = 1; i < cell.rowspan; i++) {
+              mergedIndexes.add(cell.row + i)
+            }
+          }
+        })
+      }
+      return mergedIndexes
+    },
+
     // 清空选择
     clearSelection() {
       if (this.$refs.vxeTable) {
@@ -272,11 +556,54 @@ export default {
       // 得手动触发
       this.handleSelectionChange()
     },
+    // 获取被合并的从属行索引集合
+    getMergedRowIndexes() {
+      const mergedIndexes = new Set()
+      if (this.mergeCells && this.mergeCells.length > 0) {
+        this.mergeCells.forEach((cell) => {
+          if (cell.rowspan > 1) {
+            // 从 row+1 到 row+rowspan-1 都是被合并的从属行
+            for (let i = 1; i < cell.rowspan; i++) {
+              mergedIndexes.add(cell.row + i)
+            }
+          }
+        })
+      }
+      return mergedIndexes
+    },
     toggleAll($table, disabled) {
       if (disabled) {
         return false
       }
-      $table.toggleAllCheckboxRow()
+      // 如果配置了排除合并行，则手动处理非合并行的选中状态
+      if (this.excludeMergedRows && this.mergeCells && this.mergeCells.length > 0) {
+        const mergedIndexes = this.getMergedRowIndexes()
+        const allData = this.data || []
+        // 筛选出可选择的行（排除合并从属行 + 排除禁止选择的行）
+        const selectableRows = allData.filter((row, index) => {
+          if (mergedIndexes.has(index)) return false
+          if (typeof this.forbidSelect === 'function' && this.forbidSelect({ row }) === true) return false
+          return true
+        })
+        // 判断当前可选行是否已全部选中
+        const checkedRows = $table.getCheckboxRecords(false)
+        const checkedSet = new Set(checkedRows)
+        const isAllChecked = selectableRows.length > 0 && selectableRows.every((row) => checkedSet.has(row))
+        if (isAllChecked) {
+          // 已全选，则取消可选行的选中状态
+          selectableRows.forEach((row) => {
+            $table.setCheckboxRow(row, false)
+          })
+        } else {
+          // 未全选，则选中所有可选行
+          selectableRows.forEach((row) => {
+            $table.setCheckboxRow(row, true)
+          })
+        }
+      } else {
+        // 默认行为：全选/取消全选所有行
+        $table.toggleAllCheckboxRow()
+      }
       this.key++
       this.handleSelectionChange()
     },
@@ -329,9 +656,10 @@ export default {
     },
     // row当前单次勾选的哪一行数据 包含checked字段
     handleSelectionChange(row = '') {
-      const val = this.$refs.vxeTable.getCheckboxRecords()
+      const val = this.$refs.vxeTable.getCheckboxRecords(false)
       // 支持跨页勾选
       const val1 = this.$refs.vxeTable.getCheckboxReserveRecords()
+
       this.$emit('selection-change-method', [...val, ...val1], row)
     },
     // 点击行勾选/取消勾选
@@ -392,6 +720,193 @@ export default {
       this.sizeBind = el
     },
     // 计算列宽
+    // ========== 悬浮按钮组相关方法 ==========
+    // 清理所有定时器
+    clearHoverTimers() {
+      if (this.hoverShowTimer) {
+        clearTimeout(this.hoverShowTimer)
+        this.hoverShowTimer = null
+      }
+      if (this.hoverHideTimer) {
+        clearTimeout(this.hoverHideTimer)
+        this.hoverHideTimer = null
+      }
+    },
+    // 鼠标进入单元格事件（防抖处理）
+    handleCellMouseEnter({ row, rowIndex, $rowIndex, $event }) {
+      // 如果没有配置悬浮按钮，不处理
+      if (!this.btnList || this.btnList.length === 0) {
+        return
+      }
+      // 清理隐藏定时器
+      if (this.hoverHideTimer) {
+        clearTimeout(this.hoverHideTimer)
+        this.hoverHideTimer = null
+      }
+      // 如果是同一行，不重复处理
+      if (this.hoverRowIndex === rowIndex && this.showHoverBtns) {
+        return
+      }
+      // 清理之前的显示定时器
+      if (this.hoverShowTimer) {
+        clearTimeout(this.hoverShowTimer)
+      }
+      // 延迟显示（防抖）
+      this.hoverShowTimer = setTimeout(() => {
+        this.updateHoverRow(row, rowIndex, $event)
+      }, this.hoverBtnsDelay)
+    },
+    // 鼠标离开单元格事件（防抖处理）
+    handleCellMouseLeave({ row, rowIndex, $event }) {
+      // 如果没有配置悬浮按钮，不处理
+      if (!this.btnList || this.btnList.length === 0) {
+        return
+      }
+      // 清理显示定时器
+      if (this.hoverShowTimer) {
+        clearTimeout(this.hoverShowTimer)
+        this.hoverShowTimer = null
+      }
+      // 延迟隐藏（给鼠标移动到按钮组的时间）
+      this.hoverHideTimer = setTimeout(() => {
+        if (!this.isHoverOnBtnGroup) {
+          this.hideHoverBtns()
+        }
+      }, this.hoverBtnsHideDelay)
+    },
+    // 更新悬停行信息并显示按钮组
+    updateHoverRow(row, rowIndex, $event) {
+      this.hoverRowData = row
+      this.hoverRowIndex = rowIndex
+      // 计算按钮组位置
+      this.calculateBtnPosition($event)
+      // 显示按钮组
+      this.showHoverBtns = true
+      // 触发事件
+      this.$emit('row-hover-enter', { row, rowIndex })
+    },
+    // 计算按钮组位置
+    calculateBtnPosition($event) {
+      const tableEl = this.$refs.vxeTable?.$el
+      if (!tableEl) return
+      // 获取当前行的 DOM 元素
+      const rowEl = $event?.target?.closest('tr.vxe-body--row')
+      if (!rowEl) return
+      // 获取表格容器的位置信息
+      const tableRect = tableEl.getBoundingClientRect()
+      const rowRect = rowEl.getBoundingClientRect()
+      // 计算相对于表格容器的位置
+      this.hoverBtnsPosition = {
+        top: rowRect.top - tableRect.top,
+        height: rowRect.height
+      }
+    },
+    // 隐藏悬浮按钮组
+    hideHoverBtns() {
+      // 如果下拉菜单正在展开，不隐藏
+      if (this.isDropdownVisible) {
+        return
+      }
+      // 移除当前行的 hover 类名
+      this.removeRowHoverClass()
+      this.showHoverBtns = false
+      this.hoverRowData = null
+      this.hoverRowIndex = -1
+      this.isHoverOnBtnGroup = false
+      // 触发事件
+      this.$emit('row-hover-leave')
+    },
+    // 鼠标进入按钮组
+    handleBtnGroupEnter() {
+      this.isHoverOnBtnGroup = true
+      // 清理隐藏定时器
+      if (this.hoverHideTimer) {
+        clearTimeout(this.hoverHideTimer)
+        this.hoverHideTimer = null
+      }
+      // 给当前行添加 hover 类名
+      this.addRowHoverClass()
+    },
+    // 鼠标离开按钮组
+    handleBtnGroupLeave() {
+      this.isHoverOnBtnGroup = false
+      // 如果下拉菜单正在展开，不隐藏按钮组
+      if (this.isDropdownVisible) {
+        return
+      }
+      // 移除当前行的 hover 类名
+      this.removeRowHoverClass()
+      // 延迟隐藏
+      this.hoverHideTimer = setTimeout(() => {
+        // 再次检查下拉菜单状态
+        if (!this.isDropdownVisible) {
+          this.hideHoverBtns()
+        }
+      }, this.hoverBtnsHideDelay)
+    },
+    // 处理下拉菜单显示/隐藏状态变化
+    handleDropdownVisibleChange(visible) {
+      this.isDropdownVisible = visible
+      if (!visible) {
+        // 下拉菜单关闭后，延迟检查是否需要隐藏按钮组
+        this.hoverHideTimer = setTimeout(() => {
+          if (!this.isHoverOnBtnGroup && !this.isDropdownVisible) {
+            this.hideHoverBtns()
+          }
+        }, this.hoverBtnsHideDelay)
+      }
+    },
+    // 给当前悬停行添加 hover 类名
+    addRowHoverClass() {
+      const tableEl = this.$refs.vxeTable?.$el
+      if (!tableEl || this.hoverRowIndex < 0) return
+      // 查找当前行的 tr 元素
+      const rows = tableEl.querySelectorAll('tr.vxe-body--row')
+      rows.forEach((row, index) => {
+        if (index === this.hoverRowIndex) {
+          row.classList.add('row--hover')
+        }
+      })
+    },
+    // 移除当前悬停行的 hover 类名
+    removeRowHoverClass() {
+      const tableEl = this.$refs.vxeTable?.$el
+      if (!tableEl) return
+      // 移除所有行的 hover 类名
+      const rows = tableEl.querySelectorAll('tr.vxe-body--row.row--hover')
+      rows.forEach((row) => {
+        row.classList.remove('row--hover')
+      })
+    },
+    // 处理悬浮按钮点击
+    handleHoverBtnClick(btn, $event) {
+      if (btn.disabled) return
+
+      if (typeof btn.command === 'function') {
+        btn.command(this.hoverRowData, this.hoverRowIndex, $event)
+      } else if (typeof btn.command === 'string') {
+        this.$emit(btn.command, this.hoverRowData, this.hoverRowIndex, $event)
+      }
+      // 触发事件
+      this.$emit('hover-btn-click', {
+        btn,
+        row: this.hoverRowData,
+        rowIndex: this.hoverRowIndex,
+        $event
+      })
+    },
+    // 处理"更多"下拉菜单命令
+    handleMoreBtnCommand(btn) {
+      if (!btn || btn.disabled) return
+      this.handleHoverBtnClick(btn, null)
+    },
+    // 表格滚动时隐藏按钮组
+    handleTableScroll() {
+      if (this.showHoverBtns) {
+        this.hideHoverBtns()
+      }
+    },
+    // ========== 列宽计算相关方法 ==========
     calcColumnWidth(columns) {
       columns = columns.map((item) => {
         return {
@@ -409,7 +924,6 @@ export default {
         return columns
       }
       const { width: windowWidth } = wrapperEl.getBoundingClientRect()
-      console.log(windowWidth, 'windowWidth')
       // 定义每个字符的平均宽度（像素）
       const CHAR_WIDTH = 20 // 根据实际字体大小调整
       const PADDING = 20 // 左右padding