当前位置：首页 > news >正文

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

news 来源：原创 2025/7/2 1:43:29

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

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例13，TableView16_13 键盘辅助拖拽示例
- 📚前言
- 📚页面效果
- - 📘组件代码
- 📚代码测试
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 src\router\index.js
  - 📘编写展示入口 src\App.vue
- 📚页面效果

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

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

📚前言

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

📚页面效果

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

📘组件代码

<!-- 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"borderstripe/></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) returnconst newData = [...taskList.value]const [movedItem] = newData.splice(fromIndex, 1)newData.splice(toIndex, 0, movedItem)taskList.value = newDataselectedRowIndex.value = toIndex
}// 更新高亮位置的函数
const updateHighlightPosition = () => {// 由于使用了计算属性，只需触发重新渲染if (selectedRowIndex.value !== -1) {const temp = selectedRowIndex.valueselectedRowIndex.value = -1nextTick(() => {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

目录

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

📚前言

📚页面效果

📘组件代码

相关文章：