參考原文地址:vxe-table 鼠標(biāo)滑動選擇多行,鼠標(biāo)區(qū)域選中批量操作[2]-CSDN博客

準(zhǔn)備vxe-talbe@4.5.7,Vue@3.3.4,在原作者的基礎(chǔ)上進行了修改,修改后和官網(wǎng)幾乎無差別,允許左右側(cè)固定列選中,允許任意范圍選中,但是鍵盤監(jiān)聽功能沒添加//感覺沒啥軟用....

先看效果:

正常鼠標(biāo)從左上往右下選中,或鼠標(biāo)從右下往左上選中:

選中后右鍵菜單效果:

在選中范圍框外右鍵到新范圍框效果:

Vue3代碼:直接復(fù)制文章來源地址http://www.zghlxwxcb.cn/news/detail-751367.html

<template>
  <div>
    <!-- 正常區(qū)域的框 -->
    <div class="vxe-table--cell-area" ref="cellarea">
      <span class="vxe-table--cell-main-area"></span>
      <span class="vxe-table--cell-active-area"></span>
    </div>
    <!-- 左側(cè)fixed區(qū)域的框 -->
    <div class="vxe-table--cell-area" ref="leftfixedcellarea">
      <span class="vxe-table--cell-main-area"></span>
      <span class="vxe-table--cell-active-area"></span>
    </div>
    <!-- 右側(cè)fixed區(qū)域的框 -->
    <div class="vxe-table--cell-area" ref="rightfixedcellarea">
      <span class="vxe-table--cell-main-area"></span>
      <span class="vxe-table--cell-active-area"></span>
    </div>

    <vxe-grid ref='xGrid' v-bind="gridOptions" height="500px"
      @toolbar-button-click="toolbarButtonClickEvent">
    </vxe-grid>
  </div>
</template>
 
<script lang="ts" setup>
import { VxeGridProps } from 'vxe-table'

let gridOptions = reactive<VxeGridProps<any>>({
  //左上角按鈕
  toolbarConfig: {
    perfect: true,
    enabled: true,
    size: "mini",
    buttons: [
      {
        code: 'getcellselctdata', type: "text", name: '獲取選中數(shù)據(jù)'
      }
    ],
  },
  //列配置 (使用列拖拽功能,必須配置useKey為true)
  columnConfig: { resizable: true, useKey: true },
  //邊框
  border: "full",
  //斑馬紋
  stripe: true,
  //列信息
  columns: [//列總寬度為1500
    { width: 100, field: "id", title: "#", align: "left", fixed: 'left' },
    { width: 100, field: "name", title: "姓名", align: "left", fixed: 'left' },
    { width: 400, field: "age", title: "年齡", align: "left" },
    { width: 400, field: "sex", title: "性別", align: "left" },
    { width: 100, field: "job", title: "崗位", align: "left", fixed: 'right' },
    { width: 100, field: "address", title: "地址", align: "left", fixed: 'right' }
  ],
  //數(shù)據(jù)
  data: [
    { id: 1, name: "張三", age: 30, sex: "男", job: "前端", address: "中國xxxxxxxxxx" },
    { id: 2, name: "李四", age: 30, sex: "男", job: "后端", address: "中國xxxxxxxxxx" },
    { id: 3, name: "王五", age: 30, sex: "女", job: "運維", address: "中國xxxxxxxxxx" },
    { id: 4, name: "趙六", age: 30, sex: "男", job: "美工", address: "中國xxxxxxxxxx" },
    { id: 5, name: "老八", age: 30, sex: "男", job: "項目經(jīng)理", address: "中國xxxxxxxxxx" },
    { id: 6, name: "桀桀", age: 30, sex: "女", job: "售后", address: "中國xxxxxxxxxx" },
    { id: 7, name: "張三", age: 30, sex: "男", job: "前端", address: "中國xxxxxxxxxx" },
    { id: 8, name: "李四", age: 30, sex: "男", job: "后端", address: "中國xxxxxxxxxx" },
    { id: 9, name: "王五", age: 30, sex: "女", job: "運維", address: "中國xxxxxxxxxx" },
    { id: 10, name: "趙六", age: 30, sex: "男", job: "美工", address: "中國xxxxxxxxxx" },
    { id: 11, name: "老八", age: 30, sex: "男", job: "項目經(jīng)理", address: "中國xxxxxxxxxx" },
    { id: 12, name: "桀桀", age: 30, sex: "女", job: "售后", address: "中國xxxxxxxxxx" },
    { id: 13, name: "張三", age: 30, sex: "男", job: "前端", address: "中國xxxxxxxxxx" },
    { id: 14, name: "李四", age: 30, sex: "男", job: "后端", address: "中國xxxxxxxxxx" },
    { id: 15, name: "王五", age: 30, sex: "女", job: "運維", address: "中國xxxxxxxxxx" },
    { id: 16, name: "趙六", age: 30, sex: "男", job: "美工", address: "中國xxxxxxxxxx" },
    { id: 17, name: "老八", age: 30, sex: "男", job: "項目經(jīng)理", address: "中國xxxxxxxxxx" },
    { id: 18, name: "桀桀", age: 30, sex: "女", job: "售后", address: "中國xxxxxxxxxx" },
    { id: 19, name: "張三", age: 30, sex: "男", job: "前端", address: "中國xxxxxxxxxx" },
    { id: 20, name: "李四", age: 30, sex: "男", job: "后端", address: "中國xxxxxxxxxx" },
    { id: 21, name: "王五", age: 30, sex: "女", job: "運維", address: "中國xxxxxxxxxx" },
    { id: 22, name: "趙六", age: 30, sex: "男", job: "美工", address: "中國xxxxxxxxxx" },
    { id: 23, name: "老八", age: 30, sex: "男", job: "項目經(jīng)理", address: "中國xxxxxxxxxx" },
    { id: 24, name: "桀桀", age: 30, sex: "女", job: "售后", address: "中國xxxxxxxxxx" },
  ],
  //這里一定要指定true，否則rowConfig的height沒用
  showOverflow: true,
  //行配置,這里的行高一定需要指定
  rowConfig: { isCurrent: true, height: 35, isHover: true },
})
//#region 以下是鼠標(biāo)選中功能


//鼠標(biāo)滑動選中
let isSelecting = ref(false) // 是否正在進行選擇操作,默認(rèn)為false
let selectionStart = reactive({ rowIndex: -1, cellIndex: -1 }) // 選擇操作起始單元格位置
let selectionEnd = reactive({ rowIndex: -1, cellIndex: -1 }) // 選擇操作結(jié)束單元格位置

onMounted(() => {
  addListener()
})
//獲取頁面ref節(jié)點
//獲取vxetable表格節(jié)點
let xGrid = ref()
let cellarea = ref()
let leftfixedcellarea = ref()
let rightfixedcellarea = ref()

//返回table的ref名稱
const getTablexGrid = () => {
  return xGrid.value
}

//添加事件
const addListener = () => {
  //添加多選列
  nextTick(() => {
    window.addEventListener("mousedown", tableOutDestroyAreaBox)//給window添加鼠標(biāo)按下事件,判斷是否在表格外,是銷毀
    window.addEventListener("mouseup", tbodymouseup)//給window添加鼠標(biāo)松開事件
    let tbody = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper table tbody")//獲取tbody區(qū)域

    if (tbody) {
      tbody.addEventListener("mousedown", tbodymousedown)//給表格中的tbody添加鼠標(biāo)按下事件
      tbody.addEventListener("mousemove", tbodymousemove)//給表格中的tbody添加鼠標(biāo)移動事件
      tbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//給表格中的tbody添加鼠標(biāo)移出事件
      tbody.addEventListener("click", tableCellClick)//添加左鍵單擊事件
      tbody.oncontextmenu = tableCellMenuClick//添加右鍵菜單事件
    }

    let bodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper")//獲取正常區(qū)域的body
    if (bodyWrapper) {
      //注意這里的ref名稱，這里是非fixed區(qū)域的框的名稱
      bodyWrapper.appendChild(cellarea.value)//添加范圍框元素
    }
    setTimeout(() => {
      //#region 左側(cè)固定列
      let leftfixedtbody = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper table tbody")//獲取fixedtbody區(qū)域

      if (leftfixedtbody) {
        leftfixedtbody.addEventListener("mousedown", tbodymousedown)//給表格中的leftfixedtbody添加鼠標(biāo)按下事件
        leftfixedtbody.addEventListener("mousemove", tbodymousemove)//給表格中的leftfixedtbody添加鼠標(biāo)移動事件
        leftfixedtbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//給表格中的leftfixedtbody添加鼠標(biāo)移出事件
        leftfixedtbody.addEventListener("click", tableCellClick)//添加單擊事件
        leftfixedtbody.oncontextmenu = tableCellMenuClick//添加右鍵菜單事件
      }

      let leftFixedBodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper")
      if (leftFixedBodyWrapper) {
        //注意這里的ref名稱，這里是fixed區(qū)域的框的名稱
        leftFixedBodyWrapper.appendChild(leftfixedcellarea.value)
      }
      //#endregion

      //#region 右側(cè)固定列
      let rightfixedtbody = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper table tbody")//獲取fixedtbody區(qū)域

      if (rightfixedtbody) {
        rightfixedtbody.addEventListener("mousedown", tbodymousedown)//給表格中的rightfixedtbody添加鼠標(biāo)按下事件
        rightfixedtbody.addEventListener("mousemove", tbodymousemove)//給表格中的rightfixedtbody添加鼠標(biāo)移動事件
        rightfixedtbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//給表格中的rightfixedtbody添加鼠標(biāo)移出事件
        rightfixedtbody.addEventListener("click", tableCellClick)//添加單擊事件
        rightfixedtbody.oncontextmenu = tableCellMenuClick//添加右鍵菜單事件
      }

      let rightFixedBodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper")
      if (rightFixedBodyWrapper) {
        //注意這里的ref名稱，這里是fixed區(qū)域的框的名稱
        rightFixedBodyWrapper.appendChild(rightfixedcellarea.value)
      }
      //#endregion

    }, 100)

  })
}

//鼠標(biāo)按下事件
const tbodymousedown = (event: MouseEvent) => {
  event.stopPropagation()//阻止冒泡
  getTablexGrid().closeMenu()//手動關(guān)閉右鍵菜單
  //左鍵0,中鍵1,右鍵2
  if (event.button === 0) {//左鍵按下
    // 記錄選擇操作起始位置
    selectionStart = getCellPosition(event.target)//設(shè)置選擇操作起始單元格位置

    isSelecting.value = true//標(biāo)記為正在選擇操作
  }
}


//鼠標(biāo)移動事件
//todo 這里要節(jié)流操作,只在結(jié)束時觸發(fā)一次
const tbodymousemove = (event: MouseEvent) => {
  if (event.button === 0) {//左鍵移動
    if (!isSelecting.value) return//如果當(dāng)前非正在選擇操作,直接退出
    //記錄選擇操作結(jié)束位置
    selectionEnd = getCellPosition(event.target)

    //設(shè)置樣式,并顯示范圍框
    setselectedCellArea()

  }
}

//鼠標(biāo)按鍵結(jié)束事件,添加在了window中
const tbodymouseup = (event: MouseEvent) => {
  if (event.button === 0) {//左鍵松開
    isSelecting.value = false//標(biāo)記為停止選擇操作
  }
}

let outevent = ref()//移動事件,不保存,循環(huán)定時器內(nèi)無法監(jiān)聽到新的事件

//鼠標(biāo)移出表格事件,只在移動的時候會觸發(fā),暫停移動不觸發(fā)
const tbodymouseout = (event: MouseEvent) => {
  outevent.value = event//保存移動事件

  if (isSelecting.value) {//如果正在執(zhí)行選中操作
    const timer = setInterval(() => {//開啟循環(huán)定時器
      if (isSelecting.value) {//判斷當(dāng)前是否正在選擇
        //獲取表格元素
        var table = getTablexGrid().$el.querySelector(".vxe-table--body-wrapper table")//獲取非固定列(和固定列)的table元素
        if (outevent.value.clientX > table.parentElement.getBoundingClientRect().right - 30) {//判斷鼠標(biāo)x軸是否超出表格右側(cè),向右滾動
          var maxScrollPosition = table.parentElement.scrollWidth - table.parentElement.clientWidth//獲取滾動條最大位置
          if (table.parentElement.scrollLeft < maxScrollPosition) {//如果沒到滾動條最大位置,執(zhí)行滾動
            table.parentElement.scrollLeft += 10//執(zhí)行水平滾動條向右滾動
          }
        } else if (outevent.value.clientX < table.parentElement.getBoundingClientRect().left + 30) {//判斷鼠標(biāo)x軸是否超出表格左側(cè),向左滾動
          if (table.parentElement.scrollLeft > 0) {//如果沒到滾動條最大位置,執(zhí)行滾動
            //鼠標(biāo)移出表格，滾動水平滾動條
            table.parentElement.scrollLeft -= 10//執(zhí)行水平滾動條向右滾動
          }
        }


      } else {
        clearInterval(timer)//清除循環(huán)定時器
      }
    }, 200)//這里設(shè)置滑動速度

  }

}

//節(jié)流函數(shù),todo//改為全局
const throttle = (fn: Function, delay: number) => {
  const canRun = ref(true)
  return (...args: any[]) => {
    if (!canRun.value) return
    canRun.value = false
    setTimeout(() => {
      fn(...args)
      canRun.value = true
    }, delay)
  }
}

// 獲取單元格位置(rowIndex, cellIndex)
const getCellPosition = (cell: any) => {


  while (cell.tagName !== 'TD') {//將cell指向TD元素
    cell = cell.parentElement
  }

  let visibleColumn = getTablexGrid().getTableColumn().visibleColumn//獲取處理條件之后的全量表頭列
  const cellIndex = visibleColumn.findIndex((col: { id: any; }) => {//返回colid相等的visibleColumn全量表頭列的索引
    return col.id == cell.getAttribute("colid")
  })

  let visibleData = getTablexGrid().getTableData().visibleData//獲取處理條件之后的全量表體數(shù)據(jù)

  const rowIndex = visibleData.findIndex((row: { _X_ROW_KEY: any; }) => {//返回rowid相等的visibleData全量表體數(shù)據(jù)
    return row._X_ROW_KEY == cell.parentElement.getAttribute("rowid")//返回rowid相等的visibleData全量表體數(shù)據(jù)的索引
  })
  return { rowIndex, cellIndex }

}

//設(shè)置框打開
const setselectedCellArea = () => {



  var activeElement = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area")//正常區(qū)域選中邊框激活的元素(僅是邊框)
  var mainElement = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area")//正常區(qū)域選中邊框內(nèi)整個范圍的元素

  var leftFixedActiveElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area")//左側(cè)固定列選中邊框激活的元素(僅是邊框)
  var leftFixedMainElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area")//左側(cè)固定列選中邊框內(nèi)整個范圍的元素

  var rightFixedActiveElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area")//右側(cè)固定列選中邊框激活的元素(僅是邊框)
  var rightFixedMainElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area")//右側(cè)固定列選中邊框內(nèi)整個范圍的元素


  var elements = [activeElement, mainElement, leftFixedActiveElement, leftFixedMainElement, rightFixedActiveElement, rightFixedMainElement]
  let area = getAreaBoxPosition()
  if (area) {
    var { width, height, left, top, right } = area
  } else {
    return
  }
  elements.forEach((element, index) => {
    if (element) {//設(shè)置顯示范圍框的內(nèi)部元素的樣式
      element.style.width = `${width}px`
      element.style.height = `${height}px`
      element.style.top = `${top}px`
      element.style.display = "block"
      if (index <= elements.length - 1 - 2) {//如果不是rightFixedActiveElement或rightFixedMainElement
        element.style.left = `${left}px`
      } else {
        element.style.right = `${right}px`
      }
    }
  })

  //顯示范圍框
  openAreaBox()
}

//根據(jù)開始位置和結(jié)束位置的索引計算框的width,height,left,top(左側(cè)固定列和正常區(qū)域和右側(cè)固定列使用)
const getAreaBoxPosition = () => {
  let startRowIndex = selectionStart.rowIndex//獲取選中起始行索引
  let endRowIndex = selectionEnd.rowIndex//獲取選中結(jié)束行索引
  let startColumnIndex = selectionStart.cellIndex//獲取選中起始列索引
  let endColumnIndex = selectionEnd.cellIndex//獲取選中結(jié)束列索引
  let visibleColumn = getTablexGrid().getTableColumn().visibleColumn//獲取處理條件之后的全量表頭列
  let visibleData = getTablexGrid().getTableData().visibleData//獲取處理條件之后的全量表體數(shù)據(jù)
  if (startColumnIndex < 0 || endColumnIndex < 0 || startRowIndex < 0 || endRowIndex < 0) return
  var maxColumnIndex = visibleColumn.length - 1//最大列索引
  var maxRowIndex = visibleData.length - 1//最大行索引
  if (endColumnIndex > maxColumnIndex) {//到最后一列,指向最后一列
    endColumnIndex = maxColumnIndex
  }
  if (endRowIndex > maxRowIndex) {//到最后一行,指向最后一行
    endRowIndex = maxRowIndex
  }
  let width = 0, height = 0, left = 0, top = 0, right = 0
  visibleColumn.forEach((col: { renderWidth: number; }, index: number) => {
    if (startColumnIndex <= endColumnIndex) {//開始列索引小于結(jié)束列索引,即從左往右選擇
      if (index < startColumnIndex) {
        left += col.renderWidth//距離表格整體左側(cè)邊框距離 
      }
      if (index > endColumnIndex) {//數(shù)據(jù)索引大于結(jié)束列,這里獲取距離后面數(shù)據(jù)的寬度
        right += col.renderWidth//距離表格整體右側(cè)邊框距離,加上當(dāng)前列
      }
      if (startColumnIndex <= index && index <= endColumnIndex) {//開始列索引大于數(shù)據(jù)索引 和 結(jié)束列索引小于數(shù)據(jù)索引,這里獲取選中區(qū)域的寬度
        width += col.renderWidth//選中區(qū)域的寬度
      }
    } else {//從右往左選擇
      if (index < endColumnIndex) {
        left += col.renderWidth//距離表格整體左側(cè)邊框距離 
      }
      if (index > startColumnIndex) {//數(shù)據(jù)索引大于開始列,這里獲取距離后面數(shù)據(jù)的寬度
        right += col.renderWidth//距離表格整體右側(cè)邊框距離,加上當(dāng)前列
      }
      if (startColumnIndex >= index && index >= endColumnIndex) {//開始列索引大于數(shù)據(jù)索引 和 結(jié)束列索引小于數(shù)據(jù)索引,這里獲取選中區(qū)域的寬度
        width += col.renderWidth//選中區(qū)域的寬度
      }
    }

  })
  if (startRowIndex <= endRowIndex) {//開始行索引小于結(jié)束行索引,即從上往下選擇
    height = (endRowIndex - startRowIndex + 1) * gridOptions.rowConfig!.height!//選中區(qū)域的高度
    top = startRowIndex * gridOptions.rowConfig!.height!//距離表格整體頂部邊框距離
  } else {
    height = (startRowIndex - endRowIndex + 1) * gridOptions.rowConfig!.height!//選中區(qū)域的高度
    top = endRowIndex * gridOptions.rowConfig!.height!//距離表格整體頂部邊框距離
  }



  return { width, height, left, top, right }

}

//顯示范圍框
const openAreaBox = () => {
  var element = xGrid.value.$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
  if (element) {
    element.style.display = "block"
  }
  element = xGrid.value.$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
  if (element) {
    element.style.display = "block"
  }
  element = xGrid.value.$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
  if (element) {
    element.style.display = "block"
  }
}

//表格外銷毀范圍框
const tableOutDestroyAreaBox = (event: MouseEvent) => {
  var element = getTablexGrid().$el.querySelector(".vxe-table--render-wrapper")
  if (element) {
    if (event.clientX < element.getBoundingClientRect().left || event.clientX > element.getBoundingClientRect().right
      || event.clientY > element.getBoundingClientRect().top || event.clientY < element.getBoundingClientRect().bottom
    ) {
      destroyAreaBox()
    }
  }


}

//銷毀范圍框
const destroyAreaBox = () => {
  var element = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
  if (element) {
    element.style.display = "none"
  }
  element = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
  if (element) {
    element.style.display = "none"
  }
  element = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
  if (element) {
    element.style.display = "none"
  }
}

//表格單元格點擊事件
const tableCellClick = (e: MouseEvent) => {

  if (!isSelecting.value) {//非選中狀態(tài)
    try {
      selectionStart = getCellPosition(e.target)//獲取單元格位置
      selectionEnd = selectionStart//結(jié)束位置也是自己
      //設(shè)置樣式
      setselectedCellArea()
    } catch (error) {

    }

  }
}

//表格右鍵點擊事件
const tableCellMenuClick = (e: MouseEvent) => {
  if (!isSelecting.value) {//非選中狀態(tài)
    let currentCellPosition = getCellPosition(e.target)//獲取單元格位置
    var horizontalFlag//是否在范圍框的水平判斷標(biāo)記
    var verticalFlag//是否在范圍框的垂直判斷標(biāo)記
    if (selectionStart.cellIndex <= selectionEnd.cellIndex) {//如果是從左往右選取
      horizontalFlag = selectionStart.cellIndex <= currentCellPosition.cellIndex && currentCellPosition.cellIndex <= selectionEnd.cellIndex
    } else {//從右往左選取
      horizontalFlag = selectionEnd.cellIndex <= currentCellPosition.cellIndex && currentCellPosition.cellIndex <= selectionStart.cellIndex
    }
    if (selectionStart.rowIndex <= selectionEnd.rowIndex) {//如果是從上往下選取
      verticalFlag = selectionStart.rowIndex <= currentCellPosition.rowIndex && currentCellPosition.rowIndex <= selectionEnd.rowIndex
    } else {//從下往上選取
      verticalFlag = selectionEnd.rowIndex <= currentCellPosition.rowIndex && currentCellPosition.rowIndex <= selectionStart.rowIndex
    }

    if (horizontalFlag && verticalFlag) { //判斷如果不在選中區(qū)域內(nèi),觸發(fā)表格左鍵單擊事件,更新截取單元格,否則如果在正常觸發(fā)右鍵菜單

    } else {
      selectionStart = getCellPosition(e.target)//獲取單元格位置
      selectionEnd = selectionStart//結(jié)束位置也是自己
      //設(shè)置樣式
      setselectedCellArea()
    }

  }

}

const toolbarButtonClickEvent = ({ code }: { code: any }) => {
  switch (code) {
    case "getcellselctdata":
      //我給大家打印處理:
      console.log("是否正在進行滑動選中操作：", isSelecting.value)
      //左上角坐標(biāo)
      console.log("單元格起始位置：索引:", selectionStart)
      //右下角坐標(biāo)
      console.log("單元格結(jié)束位置：索引:", selectionEnd)

      //這里需要是visibleData
      let tableData = getTablexGrid().getTableData().visibleData//獲取處理條件之后的全量表體數(shù)據(jù)
      let rowStart = selectionStart.rowIndex//獲取選中起始行索引
      let rowEnd = selectionEnd.rowIndex//獲取選中結(jié)束行索引
      let selectRows = tableData.filter((col, index: number) => {//col參數(shù)不能改否則會獲取不到數(shù)據(jù)
        //這里修改從右下往左上拖動的數(shù)據(jù)顯示
        if (rowStart <= rowEnd) {
          return rowStart <= index && rowEnd >= index
        } else {
          return rowStart >= index && rowEnd <= index
        }
      })
      console.log("鼠標(biāo)選中行:", JSON.stringify(selectRows))

      //這里需要是visibleColumn
      let colStart = selectionStart.cellIndex//獲取選中起始列索引
      let colEnd = selectionEnd.cellIndex//獲取選中結(jié)束列索引
      let tableColumn = getTablexGrid().getTableColumn().visibleColumn//獲取處理條件之后的全量表頭列
      let selectCols = tableColumn.filter((col, index: number) => {//col參數(shù)不能改否則會獲取不到數(shù)據(jù)
        //這里修改從右下往左上拖動的數(shù)據(jù)顯示
        if (colStart <= colEnd) {
          return colStart <= index && colEnd >= index
        } else {
          return colStart >= index && colEnd <= index
        }

      })
      console.log("鼠標(biāo)選中列:", JSON.stringify(selectCols))
      break
  }
}
//#endregion
</script>
 
<style lang="less" scoped>
.vxe-grid {
  //禁用瀏覽器默認(rèn)選中
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}
</style>

到了這里，關(guān)于Vue3 vxe-table 手寫鼠標(biāo)區(qū)域選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！