DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例13，TableView16_13 键盘辅助拖拽示例

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例13，TableView16_13 键盘辅助拖拽示例

📚前言

DeepSeek 还创新性地引入了自适应层融合（Adaptive Layer Fusion）技术。在传统 Transformer 架构中，每一层输出对最终结果的贡献相对固定，缺乏灵活性。而在 DeepSeek 中，通过自适应层融合技术，模型能够根据输入数据的具体特点，动态、智能地调整不同层输出的权重，从而更好地适应不同类型的任务和多样化的数据，显著提升模型的泛化能力和任务适应性。在处理不同领域的文本时，自适应层融合技术可以自动调整各层的权重，使模型更专注于与该领域相关的特征，提高模型在特定领域任务中的表现。

📚页面效果

📘组件代码

<!-- TableView16_13.vue 键盘辅助拖拽示例 -->
<template>
  <div class="drag-demo">
    <h2>13. 键盘辅助拖拽排序</h2>
    <p class="description">使用键盘操作进行拖拽排序，增强可访问性</p>
    
    <div class="keyboard-guide">
      <h3>键盘操作指南</h3>
      <ul>
        <li><kbd>↑</kbd> / <kbd>↓</kbd>: 选择上/下一行</li>
        <li><kbd>Space</kbd>: 选中/取消选中当前行</li>
        <li><kbd>Ctrl</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd>: 向上/向下移动选中行</li>
        <li><kbd>Escape</kbd>: 取消选择</li>
      </ul>
    </div>
    
    <div class="table-wrapper" tabindex="0" @keydown="handleKeyDown">
      <div class="ds-table table-size-medium table-stripe table-border" expandable>
        <!-- 表格容器 -->
        <div class="table-container" style="height: auto;">
          <!-- 保持高亮元素在原位置，只修改其样式和定位方式 -->
          <div 
            v-if="selectedRowIndex !== -1" 
            class="row-highlight" 
            :style="highlightStyle"
          ></div>
          
          <!-- 数据表格容器 -->
          <div class="body-container">
            <Table
              :data="taskList"
              :columns="columns"
              draggable
              @update:data="handleDataUpdate"
              row-key="id"
              border
              stripe
            />
          </div>
        </div>
      </div>
    </div>
    
    <div class="status-bar">已选择第 {
  { selectedRowIndex + 1 }} 行</div>
  </div>
</template>

<script setup>
import {
      ref, computed, onMounted, nextTick } from 'vue'
import Table from '@/components/Table/Table.vue'

const taskList = ref([
  {
      id: 1, task: '需求文档评审', status: '待处理' },
  {
      id: 2, task: '技术方案定稿', status: '进行中' },
  {
      id: 3, task: '接口文档编写', status: '待处理' },
  {
      id: 4, task: '前端开发任务', status: '未开始' },
  {
      id: 5, task: '后端开发任务', status: '未开始' },
  {
      id: 6, task: '单元测试用例', status: '未开始' },
])

const columns = [
  {
      title: '任务', dataIndex: 'task', width: '250px' },
  {
      title: '状态', dataIndex: 'status', width: '120px' }
]

// 键盘导航相关状态
const tableWrapper = ref(null)
const selectedRowIndex = ref(-1)
const activeRowIndex = ref(-1)
const statusMessage = ref('使用方向键选择行，按空格键选中，Ctrl+方向键移动选中行')
const rowHeight = ref(0)
const tableTop = ref(0)

const handleDataUpdate = (newData) => {
     
  taskList.value = newData
}

// 计算高亮行的样式
const highlightStyle = computed(() => {
     
  if (selectedRowIndex.value === -1) return {
     }
  
  // 获取所有行元素
  const rows = document.querySelectorAll('.body-table tr')
  
  // 确保选中的行存在
  if (!rows[selectedRowIndex.value]) return {
     }
  
  // 获取选中行的位置信息
  const row = rows[selectedRowIndex.value]
  const rect = row.getBoundingClientRect()
  
  // 计算相对于table-wrapper的位置
  const wrapper = document.querySelector('.table-wrapper')
  const wrapperRect = wrapper.getBoundingClientRect()
  
  return {
     
    top: `${ rect.top - wrapperRect.top}px`,
    height: `${ rect.height}px`,
    opacity: 0.4
  }
})

// 键盘导航处理
const handleKeyDown = (e) => {
     
  const rowCount = taskList.value.length
  
  // 处理上下键选择
  if (e.key === 'ArrowUp') {
     
    e.preventDefault()
    if (e.ctrlKey && selectedRowIndex.value > 0) {
     
      // Ctrl+上键移动行
      moveRow(selectedRowIndex.value, selectedRowIndex.value - 1)
    } else if (selectedRowIndex.value > 0) {
     
      // 普通上键选择上一行
      selectedRowIndex.value--
    }
  } else if (e.key === 'ArrowDown') {
     
    e.preventDefault()
    if (e.ctrlKey && selectedRowIndex.value >= 0 && selectedRowIndex.value < rowCount - 1) {
     
      // Ctrl+下键移动行
      moveRow(selectedRowIndex.value, selectedRowIndex.value + 1)
    } else if (selectedRowIndex.value < rowCount - 1) {
     
      // 普通下键选择下一行
      selectedRowIndex.value++
    } else if (selectedRowIndex.value === -1 && rowCount > 0) {
     
      // 如果当前没有选中行，则选中第一行
      selectedRowIndex.value = 0
    }
  }
  // 空格键选择/取消选择
  else if (e.key === ' ' || e.key === 'Spacebar') {
     
    e.preventDefault()
    if (selectedRowIndex.value === -1 && rowCount > 0) {
     
      selectedRowIndex.value = 0
    }
  }
  // Escape键取消选择
  else if (e.key === 'Escape') {
     
    selectedRowIndex.value = -1
  }
  
  // 更新高亮位置
  nextTick(updateHighlightPosition)
}

// 移动行
const moveRow = (fromIndex, toIndex) => {
     
  if (fromIndex === toIndex) return
  
  const newData = [...taskList.value]
  const [movedItem] = newData.splice(fromIndex, 1)
  newData.splice(toIndex, 0, movedItem)
  
  taskList.value = newData
  selectedRowIndex.value = toIndex
}

// 更新高亮位置的函数
const updateHighlightPosition = () => {
     
  // 由于使用了计算属性，只需触发重新渲染
  if (selectedRowIndex.value !== -1) {
     
    const temp = selectedRowIndex.value
    selectedRowIndex.value = -1
    nextTick(() => {
     
      selectedRowIndex.value = temp
    })
  }
}

// 初始化测量表格行高度
onMounted(() => {
     
  nextTick(() => {
     
    if (tableWrapper.value) {
     
      const rows = tableWrapper.value.querySelectorAll('tr')
      if (rows.length > 1) {
     
        // 使用第二行（第一个数据行）的高度
        rowHeight.value = rows[1].offsetHeight
        // 获取表格顶部位置
        const rect = rows[1].getBoundingClientRect()
        tableTop.value = rect.top + window.scrollY
      }
      
      // 自动聚焦表格容器
      tableWrapper.value.focus()
    }
  })
})
</script>

<style scoped>
.drag-demo {
     
  padding: 20px;
  max-width