<div class="right-bottom">
    <<img src="div" alt="" width="70%" />
      class="page"
      ref="pageRef"
      @scroll="handleScroll"
      @mouseup="handleMouseUp"
    >
      <table class="table" @mousemove="handleMouseMove">
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <td
            id="td"
            v-for="(col, colIndex) in row"
            :key="colIndex"
            :class="{
              'table-item-active': selectedCells.has(rowIndex + '-' + colIndex),
            }"
            :style="{
              backgroundColor: selectedCells.has(rowIndex + '-' + colIndex)
                ? 'skyblue'
                : col.color,
            }"
            @mousedown.prevent="startSelect(rowIndex, colIndex)"
          >
            <div
              class="table-item"
              :class="{
                'item-hover': hoverPosition == `${rowIndex}-${colIndex}`,
              }"
              @click="handleItemClick(rowIndex, colIndex)"
              @mouseenter="handleMouseEnter(rowIndex, colIndex)"
              @mouseleave="handleMouseLeave(rowIndex, colIndex)"
            >
              {{ col.hole }}
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>

// 已選擇的單元格。因為可能出現(xiàn)重復(fù)框選單元格的情況，所以這里最好使用Set類型。
const selectedCells = reactive(new Set([]));
// 矩陣起始坐標(biāo)位置?？蜻x矩陣在頁面上的位置，使用時請根據(jù)實際情況計算
let tableStartX = 0;
let tableStartY = 0;
// 單元格寬高
let cellWidth = 63;
let cellHeight = 63;
// 是否按住ctrl
let isClickCtrl = false;
// 當(dāng)前懸浮單元格坐標(biāo)
let hoverPosition = ref('');

/**
 * @description: 點擊單元格事件
 * @param row 當(dāng)前單元格X坐標(biāo)
 * @param column 當(dāng)前單元格Y坐標(biāo)
 */
const handleItemClick = (row: number, column: number) => {
  // 按下ctrl
  document.onkeydown = (e: KeyboardEvent) => {
    if (e.key === 'Control') isClickCtrl = true;
  };
  // 松開ctrl
  document.onkeyup = (e: KeyboardEvent) => {
    if (e.key === 'Control') isClickCtrl = false;
  };
  // 如果按住ctrl鍵
  if (isClickCtrl) {
    // 點擊了已經(jīng)選中的元素，取消選中; 否則選中
    if (selectedCells.has(`${row}-${column}`)) {
      selectedCells.delete(`${row}-${column}`);
    }else {
     selectedCells.add(`${row}-${column}`);
    }
  }
  // 如果沒有點擊ctrl鍵，則先清空所有選中的元素，然后選中當(dāng)前元素
  else {
    selectedCells.clear();
    selectedCells.add(`${row}-${column}`);
  }
};

/**
 * @description: 鼠標(biāo)懸浮單元格變色
 * @param row 當(dāng)前單元格X坐標(biāo)
 * @param column 當(dāng)前單元格Y坐標(biāo)
 */
// 鼠標(biāo)進入單元格，使用防抖降低代碼重復(fù)執(zhí)行次數(shù)，提高性能
const handleMouseEnter = _.debounce((row: number, column: number) => {
  hoverPosition = `${row}-${column}`;
}, 100);
// 鼠標(biāo)離開單元格
const handleMouseLeave = _.debounce(() => {
  hoverPosition = '';
}, 50);

/**
 * @description: 根據(jù)起始坐標(biāo)和結(jié)束坐標(biāo)，設(shè)置選中區(qū)域
 * @param startX 起始坐標(biāo)x
 * @param startY 起始坐標(biāo)y
 * @param endX 結(jié)束坐標(biāo)x
 * @param endY 結(jié)束坐標(biāo)y
 */
const selectRange = (
  startX: number,
  startY: number,
  endX: number,
  endY: number
) => {
  for (
    let rowIndex = Math.min(startX, endX);
    rowIndex <= Math.max(startX, endX);
    rowIndex++
  ) {
    for (
      let cellIndex = Math.min(startY, endY);
      cellIndex <= Math.max(startY, endY);
      cellIndex++
    ) {
      selectedCells.add(`${rowIndex}-${cellIndex}`);
    }
  }
};

// 起始單元格坐標(biāo)
let startCell: [number, number] | null = null;
// 鼠標(biāo)點擊事件,設(shè)置起始坐標(biāo)
function startSelect(rowIndex: number, cellIndex: number) {
  startCell = [rowIndex, cellIndex];
}
// 鼠標(biāo)抬起事件，將起始坐標(biāo)設(shè)置為null
const handleMouseUp = () => {
  startCell = null;
};
// 鼠標(biāo)移動事件
const handleMouseMove = (e: MouseEvent) => {
  debounceFun1(e);
};
const debounceFun1 = _.debounce((e: MouseEvent) => {
  // 如果沒有起始坐標(biāo)，則不執(zhí)行
  if (!startCell) return;
  // 按下ctrl鍵
  document.onkeydown = (e: KeyboardEvent) => {
    if (e.key === 'Control') isClickCtrl = true;
  };
  // 松開ctrl鍵
  document.onkeyup = (e: KeyboardEvent) => {
    if (e.key === 'Control') isClickCtrl = false;
  };
  endXY.x = e.clientX;
  endXY.y = e.clientY;
  
  // 獲取鼠標(biāo)移動的當(dāng)前單元格坐標(biāo)，并設(shè)置為框選結(jié)束坐標(biāo)
  let endCell: [number, number] | null = null;
  endCell = [
    Math.floor((e.clientY  + scrollXY.y - tableStartY) / cellHeight),
    Math.floor((e.clientX  + scrollXY.x - tableStartX) / cellWidth),
  ];
  // 如果鼠標(biāo)位置發(fā)生變化，則清空已選擇的單元格，并重新設(shè)置選中區(qū)域
  if (!isClickCtrl) {
    selectedCells.clear()
  }
  // 根據(jù)起始坐標(biāo)和結(jié)束坐標(biāo)，設(shè)置選中區(qū)域
  selectRange(...startCell, ...endCell);
}, 50);

const scrollXY = reactive({ x: 0, y: 0 });
const handleScroll = (e: any) => {
  scrollXY.x = e.target.scrollLeft;
  scrollXY.y = e.target.scrollTop;
  if (!startCell) return;
  const endCell: [number, number] = [
    Math.floor((endXY.y + e.target.scrollTop - tableStartY) / cellHeight),
    Math.floor((endXY.x + e.target.scrollLeft - tableStartX) / cellWidth),
  ];
  selectRange(...startCell, ...endCell);
};

.item-hover {
  background-color: #bae0ff !important;
}
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.right-bottom {
  margin-left: 200px;
  height: 800px;
  width: 800px;
  .page {
    width: 100%;
    height: 100%;
    overflow: scroll;
    margin: 0 auto;
    .table {
      overflow-x: auto;
      overflow-y: auto;
      .table-item {
        position: relative;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        .coordinates {
          position: absolute;
          left: 0;
          top: 0;
          font-size: 10px;
        }
      }
      .table-item-active {
        background-color: skyblue;
      }
    }
  }
  .page ::selection {
    background-color: transparent;
  }
}