vue2手写实现vxe-table的企业版多重区域选择

于 2024-11-07 18:25:19 发布
阅读量194 收藏 1
点赞数 3
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shidouyu/article/details/143604830
版权

（原创不易，请带链接走）

<template>
  <div style="width: 700px">
    <ts-button @click="getSelectedArea">获取已选数据</ts-button>
    <!-- 正常区域的框 -->
    <div class="vxe-table--cell-area" ref="cellarea">
      <!-- <span class="vxe-table--cell-main-area"></span> -->
      <!-- <span class="vxe-table--cell-active-area"></span>-->
      <span class="vxe-table--cell-multi-area"></span>
    </div>
    <!-- 左侧fixed区域的框 -->
    <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>
    <!-- 右侧fixed区域的框 -->
    <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-table border ref="xGrid" height="600" :data="tableData">
      <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="role" title="Role"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="num" title="Num"></vxe-table-column>
      <vxe-table-column field="age" title="Age"></vxe-table-column>
      <vxe-table-column
        field="address"
        title="Address"
        width="300"
      ></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import _ from 'lodash'
import throttle from 'lodash/throttle' // 假设你使用lodash的throttle函数
import { Base64 } from 'js-base64'
export default {
  data() {
    return {
      tableData: [
        {
          id: 10001,
          name: 'Test1',
          role: 'Develop',
          sex: 'Man',
          num: 23,
          age: 28,
          address:
            'ShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhenShengzhen',
        },
        {
          id: 10002,
          name: 'Test2',
          role: 'Test',
          sex: 'Women',
          num: 23,
          age: 22,
          address: 'Guangzhou',
        },
        {
          id: 10003,
          name: 'Test3',
          role: 'PM',
          sex: 'Man',
          num: 23,
          age: 32,
          address: 'Shanghai',
        },
        {
          id: 10004,
          name: 'Test4',
          role: 'Designer',
          sex: 'Women',
          num: 456,
          age: 24,
          address: 'Shanghai',
        },
        {
          id: 10005,
          name: 'Test5',
          role: 'Designer',
          sex: 'Women',
          num: 23,
          age: 42,
          address: 'Guangzhou',
        },
        {
          id: 10006,
          name: 'Test6',
          role: 'Designer',
          sex: 'Man',
          num: 23,
          age: 38,
          address: 'Shengzhen',
        },
        {
          id: 10007,
          name: 'Test7',
          role: 'Test',
          sex: 'Women',
          num: 100,
          age: 24,
          address: 'Shengzhen',
        },
        {
          id: 10008,
          name: 'Test8',
          role: 'PM',
          sex: 'Man',
          num: 345,
          age: 34,
          address: 'Shanghai',
        },
        {
          id: 10009,
          name: 'Test9',
          role: 'Designer',
          sex: 'Man',
          num: 67,
          age: 52,
          address: 'Shanghai',
        },
        {
          id: 10010,
          name: 'Test10',
          role: 'Test',
          sex: 'Women',
          num: 23,
          age: 44,
          address: 'Guangzhou',
        },
        {
          id: 10011,
          name: 'Test11',
          role: 'Designer',
          sex: 'Man',
          num: 56,
          age: 52,
          address: 'Shanghai',
        },
        {
          id: 10012,
          name: 'Test12',
          role: 'Test',
          sex: 'Women',
          num: 23,
          age: 16,
          address: 'Guangzhou',
        },
      ],
      selectionStart: { rowIndex: -1, cellIndex: -1 },
      selectionEnd: { rowIndex: -1, cellIndex: -1 },
      gridOptions: {
        rowConfig: {
          height: 49, // 假设每行高度为30，根据实际需要调整
        },
      },
      isSelecting: false,
      outevent: null,
      // 假设这是从外部或组件的某个生命周期钩子中获取的
      selectionExtendOldEnd: {
        cellIndex: null,
        rowIndex: null,
      }, // 其他数据属性
      selectionExtendOldEnd: {
        rowIndex: null,
        cellIndex: null,
      },
      mutilElementCells: [],
    }
  },
  mounted() {
    console.log(this)
    this.addListener()
  },
  methods: {
    addListener() {
      this.$nextTick(() => {
        window.addEventListener('mousedown', this.tableOutDestroyAreaBox)
        window.addEventListener('mouseup', this.tbodymouseup)
        let tbody = this.$refs.xGrid.$el.querySelector(
          '.vxe-table--main-wrapper table tbody'
        )
        if (tbody) {
          tbody.addEventListener('mousedown', this.tbodymousedown)
          tbody.addEventListener('mousemove', this.tbodymousemove)
          tbody.addEventListener('mouseout', throttle(this.tbodymouseout, 50))
          tbody.addEventListener('click', this.tableCellClick)
          tbody.oncontextmenu = this.tableCellMenuClick
        }

        let bodyWrapper = this.$refs.xGrid.$el.querySelector(
          '.vxe-table--main-wrapper .vxe-table--body-wrapper'
        )
        if (bodyWrapper) {
          let cellarea = this.$refs.cellarea.cloneNode(true)
          bodyWrapper.appendChild(cellarea)
        }

        setTimeout(() => {
          // 左侧固定列
          let leftfixedtbody = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper table tbody'
          )
          if (leftfixedtbody) {
            leftfixedtbody.addEventListener('mousedown', this.tbodymousedown)
            leftfixedtbody.addEventListener('mousemove', this.tbodymousemove)
            leftfixedtbody.addEventListener(
              'mouseout',
              throttle(this.tbodymouseout, 50)
            )
            leftfixedtbody.addEventListener('click', this.tableCellClick)
            leftfixedtbody.oncontextmenu = this.tableCellMenuClick
          }

          let leftFixedBodyWrapper = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper'
          )
          if (leftFixedBodyWrapper) {
            leftFixedBodyWrapper.appendChild(this.$refs.leftfixedcellarea)
          }

          // 右侧固定列
          let rightfixedtbody = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper table tbody'
          )
          if (rightfixedtbody) {
            rightfixedtbody.addEventListener('mousedown', this.tbodymousedown)
            rightfixedtbody.addEventListener('mousemove', this.tbodymousemove)
            rightfixedtbody.addEventListener(
              'mouseout',
              throttle(this.tbodymouseout, 50)
            )
            rightfixedtbody.addEventListener('click', this.tableCellClick)
            rightfixedtbody.oncontextmenu = this.tableCellMenuClick
          }

          let rightFixedBodyWrapper = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper'
          )
          if (rightFixedBodyWrapper) {
            rightFixedBodyWrapper.appendChild(this.$refs.rightfixedcellarea)
          }
        }, 100)
      })
    },
    tbodymousedown(event) {
      event.stopPropagation()
      event.preventDefault()
      this.$refs.xGrid.closeMenu()
      if (event.button === 0) {
        console.warn('tbodymousedown', event)
        this.selectionStart = this.getCellPosition(event.target)
        this.isSelecting = true
      }
    },
    tbodymousemove(event) {
      event.preventDefault()
      if (event.button === 0 && this.isSelecting) {
        this.selectionEnd = this.getCellPosition(event.target)
        this.setselectedCellArea(event)
      }
    },
    tbodymouseup(event) {
      event.preventDefault()
      event.stopPropagation()
      if (event.button === 0) {
        console.warn('tbodymouseup', event)
        // 没按住ctrlKey也没按住metaKey
        this.isSelecting = false
        setTimeout(() => {
          // 因为需要区分点选和框选的区别，点选是在up方法响应之后进行的，用异步来将起进行区分
          if (!event.ctrlKey && !event.metaKey) {
            // 未点击长选
            this.refreshMultiDiv({ hasLastDom: true })
          }
          this.getSelectedArea() // 打印返回已选择事件
        })
      }
    },
    /**
     * 刷新选择区域
     * @param hasLastDom
     */
    refreshMultiDiv({ hasLastDom }) {
      const multiElement = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-multi-area'
      )
      if (hasLastDom) {
        // 只留下最后一个
        // 遍历子元素，从后往前开始遍历（为了避免删除元素时影响索引）
        if (multiElement.children.length > 1) {
          for (let i = 0; i < multiElement.children.length; i++) {
            // 删除当前子元素（除了最后一个）
            multiElement.removeChild(multiElement.children[i])
            this.mutilElementCells.splice(i, 1)
          }
        }
      }
    },
    tbodymouseout(event) {
      event.preventDefault()
      this.outevent = event
      if (this.isSelecting) {
        let timer = setInterval(() => {
          if (this.isSelecting && this.$refs.xGrid?.$el) {
            let table = this.$refs.xGrid.$el.querySelector(
              '.vxe-table--body-wrapper table'
            )
            let tableRect = table.parentElement.getBoundingClientRect()
            if (this.outevent.clientX > tableRect.right - 30) {
              if (
                table.parentElement.scrollLeft <
                table.parentElement.scrollWidth -
                  table.parentElement.clientWidth
              ) {
                table.parentElement.scrollLeft += 10
              }
            } else if (this.outevent.clientX < tableRect.left + 30) {
              if (table.parentElement.scrollLeft > 0) {
                table.parentElement.scrollLeft -= 10
              }
            }
          } else {
            clearInterval(timer)
          }
        }, 200)
      }
    },
    // 节流函数
    throttle(fn, delay) {
      let lastRun = 0
      return function (...args) {
        const now = new Date().getTime()
        if (now - lastRun >= delay) {
          lastRun = now
          fn(...args)
        }
      }
    },
    getCellPosition(cell) {
      while (cell.tagName !== 'TD') {
        cell = cell.parentElement
      }

      const visibleColumn = this.$refs.xGrid.getTableColumn().visibleColumn
      const cellIndex = visibleColumn.findIndex(
        (col) => col.id === cell.getAttribute('colid')
      )

      const visibleData = this.$refs.xGrid.getTableData().visibleData
      const rowIndex = visibleData.findIndex(
        (row) => row._X_ROW_KEY === cell.parentElement.getAttribute('rowid')
      )

      return { rowIndex, cellIndex, cell }
    },

    setselectedCellArea(event) {
      // const activeElement = this.$refs.xGrid.$el.querySelector(
      //   '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area'
      // )
      // const mainElement = document.createElement('div')
      // mainElement.classList.add('vxe-table--cell-main-area')
      const multiElement = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-multi-area'
      )

      // const leftFixedActiveElement = this.$refs.xGrid.$el.querySelector(
      //   '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area'
      // )
      const leftFixedMainElement = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area'
      )
      // const rightFixedActiveElement = this.$refs.xGrid.$el.querySelector(
      //   '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area'
      // )
      const rightFixedMainElement = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area'
      )

      const cellareaElement = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
      )

      const elements = [
        // activeElement,
        // mainElement,
        // leftFixedActiveElement,
        leftFixedMainElement,
        // rightFixedActiveElement,
        rightFixedMainElement,
      ]
      const area = this.getAreaBoxPosition()
      if (area) {
        // if (
        //   cellareaElement.style.display == 'block' &&
        //   (event.ctrlKey || event.metaKey)
        // ) {
        let cellObj = area.selectCells.join('$')
        // if (multiElement.children.length > 1) {
        // 从后向前遍历数组，以避免在删除元素时影响未处理的元素的索引
        for (let i = this.mutilElementCells.length - 1; i >= 0; i--) {
          let item = this.mutilElementCells[i]
          if (
            area.selectCells.includes(item) ||
            cellObj == item ||
            item.split('$').some((part) => area.selectCells.includes(part))
          ) {
            this.mutilElementCells.splice(i, 1) // 删除当前元素
            let oldMutiElement = multiElement.querySelector(
              `[area-info="${item}"]`
            )
            if (oldMutiElement) {
              multiElement.removeChild(oldMutiElement)
            }
          }
        }

        // 防止重复加入
        let newMainElement = document.createElement('div')
        newMainElement.classList.add('vxe-table--cell-main-area') //mainElement.cloneNode(true)
        // 已经存在，按住ctrl情况
        this.setElementStyle(newMainElement, true, area)
        newMainElement.setAttribute('area-info', cellObj)
        multiElement.appendChild(newMainElement)
        this.mutilElementCells.push(cellObj)
        // } else {
        //   elements.forEach((element, index) => {
        //     this.setElementStyle(
        //       element,
        //       index <= elements.length - 1 - 2,
        //       area
        //     )
        //   })
        // }

        this.openAreaBox()
      }
    },
    setElementStyle(element, isLeft, area) {
      if (!element) {
        return
      }
      const { width, height, left, top, right } = area
      // element.setAttribute('area-info', JSON.stringify(selectCells))
      element.style.width = `${width}px`
      element.style.height = `${height}px`
      element.style.top = `${top}px`
      element.style.display = 'block'
      if (isLeft) {
        element.style.left = `${left}px`
      } else {
        element.style.right = `${right}px`
      }
    },
    getAreaBoxPosition() {
      const {
        rowIndex: startRowIndex,
        cellIndex: startColumnIndex,
        cell: startCell,
      } = this.selectionStart
      const {
        rowIndex: endRowIndex,
        cellIndex: endColumnIndex,
        cell: endCell,
      } = this.selectionEnd

      const visibleColumn = this.$refs.xGrid.getTableColumn().visibleColumn
      const visibleData = this.$refs.xGrid.getTableData().visibleData

      if (
        startColumnIndex < 0 ||
        endColumnIndex < 0 ||
        startRowIndex < 0 ||
        endRowIndex < 0
      )
        return

      const maxColumnIndex = visibleColumn.length - 1
      const 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, index) => {
        if (startColumnIndex <= endColumnIndex) {
          if (index < startColumnIndex) {
            left += col.renderWidth
          }
          if (index > endColumnIndex) {
            right += col.renderWidth
          }
          if (startColumnIndex <= index && index <= endColumnIndex) {
            width += col.renderWidth
          }
        } else {
          if (index < endColumnIndex) {
            left += col.renderWidth
          }
          if (index > startColumnIndex) {
            right += col.renderWidth
          }
          if (startColumnIndex >= index && index >= endColumnIndex) {
            width += col.renderWidth
          }
        }
      })
      const selectRows = this.getSelectedRows() // 获取所选的行
      const selectCols = this.getSelectedCols() // 获取所选的列
      let selectCells = [] // 已选的单元格下标
      for (let row of selectRows) {
        for (let col of selectCols) {
          selectCells.push(row.index + '*' + col.index) // 以行*列的方式存储
        }
      }
      let tbody = startCell.parentElement.parentElement
      height = 0
      for (let row of selectRows) {
        // 行集合
        height = height + tbody.children[row.index].offsetHeight
      }
      // 高度和top
      if (startRowIndex <= endRowIndex) {
        top = startCell.offsetTop
      } else {
        top = endCell.offsetTop
      }

      return {
        width,
        height,
        left,
        top,
        right,
        selectRows,
        selectCols,
        selectCells,
      }
    },
    openAreaBox() {
      const elements = [
        this.$refs.xGrid.$el.querySelector(
          '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
        ),
        this.$refs.xGrid.$el.querySelector(
          '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
        ),
        this.$refs.xGrid.$el.querySelector(
          '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
        ),
      ]
      elements.forEach((element) => {
        if (element) {
          element.style.display = 'block'
        }
      })
    },
    /**
     * 取消选择
     * @param event
     */
    tableOutDestroyAreaBox(event) {
      // if (!this.isSelecting) {
      //   // 未被选择不消除
      //   return
      // }
      const element = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--render-wrapper'
      )
      if (element) {
        const rect = element.getBoundingClientRect()
        if (
          event.clientX < rect.left ||
          event.clientX > rect.right ||
          event.clientY > rect.top ||
          event.clientY < rect.bottom
        ) {
          this.destroyAreaBox()
        }
      }
    },
    destroyAreaBox() {
      console.log('destroyAreaBox')
      const elements = [
        this.$refs.xGrid.$el.querySelector(
          '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
        ),
        this.$refs.xGrid.$el.querySelector(
          '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
        ),
        this.$refs.xGrid.$el.querySelector(
          '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-area'
        ),
      ]
      elements.forEach((element) => {
        if (element) {
          element.style.display = 'none'
        }
      })
      // 清空选择
      const multiElement = this.$refs.xGrid.$el.querySelector(
        '.vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-multi-area'
      )
      multiElement.innerHTML = ''
      this.mutilElementCells = []
    },
    tableCellClick(event) {
      if (!this.isSelecting) {
        try {
          this.selectionStart = this.getCellPosition(event.target)
          this.selectionEnd = this.selectionStart
          this.setselectedCellArea(event)
        } catch (error) {
          // 处理错误
        }
      }
    },
    tableCellMenuClick(event) {
      // if (!this.isSelecting) {
      //   const currentCellPosition = this.getCellPosition(event.target)
      //   let horizontalFlag, verticalFlag
      //   if (this.selectionStart.cellIndex <= this.selectionEnd.cellIndex) {
      //     horizontalFlag =
      //       this.selectionStart.cellIndex <= currentCellPosition.cellIndex &&
      //       currentCellPosition.cellIndex <= this.selectionEnd.cellIndex
      //   } else {
      //     horizontalFlag =
      //       this.selectionEnd.cellIndex <= currentCellPosition.cellIndex &&
      //       currentCellPosition.cellIndex <= this.selectionStart.cellIndex
      //   }
      //   if (this.selectionStart.rowIndex <= this.selectionEnd.rowIndex) {
      //     verticalFlag =
      //       this.selectionStart.rowIndex <= currentCellPosition.rowIndex &&
      //       currentCellPosition.rowIndex <= this.selectionEnd.rowIndex
      //   } else {
      //     verticalFlag =
      //       this.selectionEnd.rowIndex <= currentCellPosition.rowIndex &&
      //       currentCellPosition.rowIndex <= this.selectionStart.rowIndex
      //   }
      //   if (!horizontalFlag || !verticalFlag) {
      //     this.selectionStart = this.getCellPosition(event.target)
      //     this.selectionEnd = this.selectionStart
      //     this.setselectedCellArea()
      //   }
      // }
    },
    /**
     * 获取已选区域
     */
    getSelectedArea() {
      let selectRows = []
      let selectCols = []
      this.mutilElementCells.forEach((element) => {
        // 使用 '$' 作为分隔符，将字符串拆分为子串数组
        let pairs = element.split('$')
        pairs.forEach((pair) => {
          let [rowStr, colStr] = pair.split('*')
          selectRows.push(parseInt(rowStr, 10))
          selectCols.push(parseInt(colStr, 10))
        })
      })
      const tableColumn = this.$refs.xGrid?.getTableColumn().visibleColumn || []
      const tableData = this.$refs.xGrid?.getTableData().visibleData || []
      let cellValues = []
      selectRows.forEach((row, index) => {
        let field = tableColumn[selectCols[index]].field
        let obj = {}
        obj[field] = tableData[row][field]
        cellValues.push(obj)
      })
      // const selectRows = this.getSelectedRows()
      // const selectCols = this.getSelectedCols()
      // let cellValues = selectRows.map((row) => {
      //   let obj = {}
      //   selectCols.forEach((col) => {
      //     obj[col.field] = row[col.field]
      //   })
      //   return obj
      // })
      console.warn('选中的结果:', { selectRows, selectCols, cellValues })
      let cellSelectedData = { selectRows, selectCols, cellValues }
      this.$emit('getCellSelectedData', cellSelectedData)
    },
    /**
     * 获取选择的列数
     */
    getSelectedCols() {
      const tableColumn = this.$refs.xGrid?.getTableColumn().visibleColumn || []
      const colStart = this.selectionStart.cellIndex
      const colEnd = this.selectionEnd.cellIndex
      const selectCols = tableColumn.filter((col, index) => {
        col.index = index
        if (colStart <= colEnd) {
          return colStart <= index && colEnd >= index
        } else {
          return colStart >= index && colEnd <= index
        }
      })
      return selectCols
    },
    /**
     * 获取选择的行数
     */
    getSelectedRows() {
      const tableData = this.$refs.xGrid?.getTableData().visibleData || []
      const rowStart = this.selectionStart.rowIndex
      const rowEnd = this.selectionEnd.rowIndex
      const selectRows = tableData.filter((col, index) => {
        col.index = index
        if (rowStart <= rowEnd) {
          return rowStart <= index && rowEnd >= index
        } else {
          return rowStart >= index && rowEnd <= index
        }
      })
      return selectRows
    },
    removeListener() {
      window.removeEventListener('mousedown', this.tableOutDestroyAreaBox)
      window.removeEventListener('mouseup', this.tbodymouseup)
      if (this.$refs.xGrid?.$el) {
        let tbody = this.$refs.xGrid.$el.querySelector(
          '.vxe-table--main-wrapper table tbody'
        )
        if (tbody) {
          tbody.removeEventListener('mousedown', this.tbodymousedown)
          tbody.removeEventListener('mousemove', this.tbodymousemove)
          tbody.removeEventListener(
            'mouseout',
            throttle(this.tbodymouseout, 50)
          )
          tbody.removeEventListener('click', this.tableCellClick)
          // tbody.oncontextmenu = this.tableCellMenuClick
        }

        let bodyWrapper = this.$refs.xGrid.$el.querySelector(
          '.vxe-table--main-wrapper .vxe-table--body-wrapper'
        )
        if (bodyWrapper) {
          bodyWrapper.appendChild(this.$refs.cellarea)
        }

        setTimeout(() => {
          // 左侧固定列
          let leftfixedtbody = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper table tbody'
          )
          if (leftfixedtbody) {
            leftfixedtbody.removeEventListener('mousedown', this.tbodymousedown)
            leftfixedtbody.removeEventListener('mousemove', this.tbodymousemove)
            leftfixedtbody.removeEventListener(
              'mouseout',
              throttle(this.tbodymouseout, 50)
            )
            leftfixedtbody.removeEventListener('click', this.tableCellClick)
            // leftfixedtbody.oncontextmenu = this.tableCellMenuClick
          }

          let leftFixedBodyWrapper = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper'
          )
          if (leftFixedBodyWrapper) {
            leftFixedBodyWrapper.removeChild(this.$refs.leftfixedcellarea)
          }

          // 右侧固定列
          let rightfixedtbody = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper table tbody'
          )
          if (rightfixedtbody) {
            rightfixedtbody.removeEventListener(
              'mousedown',
              this.tbodymousedown
            )
            rightfixedtbody.removeEventListener(
              'mousemove',
              this.tbodymousemove
            )
            rightfixedtbody.removeEventListener(
              'mouseout',
              throttle(this.tbodymouseout, 50)
            )
            rightfixedtbody.removeEventListener('click', this.tableCellClick)
            // rightfixedtbody.oncontextmenu = this.tableCellMenuClick
          }

          let rightFixedBodyWrapper = this.$refs.xGrid.$el.querySelector(
            '.vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper'
          )
          if (rightFixedBodyWrapper) {
            rightFixedBodyWrapper.removeChild(this.$refs.rightfixedcellarea)
          }
        }, 100)
      }
    },
  },
  destroyed() {
    this.removeListener()
  },
}
</script>
<style lang="scss" scoped>
/deep/.vxe-table--cell-multi-area {
  .vxe-table--cell-main-area {
    border: 1px solid rgb(64, 158, 255);
  }
}
</style>

shidouyu
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值