关于VXE-TALE组件拖动数据并使用Ctrl+鼠标左键选中或取消选中数据的封装

​

 近期有个新需求，关于VXE-TALE组件拖动数据并使用Ctrl+鼠标左键选中或取消选中数据的封装，尝试了多个vue-table组件，其中不乏surelytable，visactor下的VTable等，或多或少都不满足此需求，在翻阅vxetable文档时，看到了关于range区域选中数据的方法，在文档基础上对其进行进一层封装，满足此需求。

​

完整代码如下：

<template>
  <div>
    <vxe-table border @cell-mouseenter="getMouseEnterData" @cell-mouseleave="setMouseEnterData" ref="tableRef"
      :column-config="columnConfig" :row-config="rowConfig" :tooltip-config="tooltipConfig" :data="tableData"
      :checkbox-config="checkboxConfig" @cellClick="handleCellClick">
      <vxe-column v-for="item, index in tableColums" :field="item.field" :key="index" :title="item.title"
        type="checkbox"></vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
const tableData = reactive([
  {
    id: 1,
    name: 'test1',
    age: 18,
    address: '上海市-浦东区'
  }, {
    id: 2,
    name: 'test2',
    age: 18,
    address: '上海市-徐汇区'
  }, {
    id: 3,
    name: 'test3',
    age: 18,
    address: '上海市-静安区'
  },
])
const tableColums = reactive([
  {
    title: '姓名',
    field: 'name'
  },
  {
    title: '年龄',
    field: 'age'
  },
  {
    title: '地址',
    field: 'address'
  }
])
const mouseEnterData = ref([])
const tableRef = ref()
const columnConfig = reactive({
  resizable: true
})
const tooltipConfig = reactive({
  showAll: true,
  contentMethod: ({ row, column }: any) => {
    const field = column.field
    if (row.changeFields && row.changeFields[field] !== undefined) {
      return `原始值：${row.changeFields[field]}`
    }
    return row.field
  }
})
const rowConfig = reactive({
  isCurrent: true,
  isHover: true
})
const checkboxConfig = reactive({
  labelField: 'name',
  highlight: true,
  range: true
})
const getMouseEnterData = ({ row }: { row: any }) => {
  mouseEnterData.value = [row]
}
const setMouseEnterData = () => {
  mouseEnterData.value = []
}

const handleCellClick = ({ $event, row }: { $event: MouseEvent, row: any }) => {
  if ($event.ctrlKey || $event.metaKey) {
    const checkDatas = tableRef.value.getCheckboxRecords()
    if (checkDatas.length) {
      let data = checkDatas.find(item => {
        return item.id == row.id
      })
      tableRef.value.setCheckboxRow(data ? data : row, data ? false : true)
    } else {
      tableRef.value.setCheckboxRow(row, true)
    }
  } else {
    tableRef.value.clearCheckboxRow()
    tableRef.value.setCheckboxRow(row, true)
  }
}

</script>
<style lang="scss" scoped>
:deep(.vxe-checkbox--icon) {
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

:deep(.row--checked) {
  background-color: #e6f7ff !important;
}

:deep(.highlight-cell) {
  background-color: #ffcccc !important;
  color: #d90000;
}
</style>

​