DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例11，TableView16_11 拖拽与行编辑结合示例

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

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

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例11，TableView16_11 拖拽与行编辑结合示例

📚前言

DeepSeek 沿用了 Transformer 架构中的多头注意力机制。多头注意力机制允许模型在多个不同的表示子空间中同时并行计算注意力，使得模型能够更加全面、深入地捕捉输入序列中不同位置元素之间的复杂关系。当处理 “苹果从树上掉下来” 这句话时，多头注意力机制能够在同一时刻聚焦 “苹果” 与 “掉下来” 之间的动作关联，以及 “苹果” 与 “树” 的位置关系，从而对句子含义实现更精准的理解。与传统的注意力机制相比，多头注意力机制能够提供更丰富的信息表示，增强模型的表达能力。

📚页面效果

📘组件代码

<!-- TableView16_11.vue 拖拽与行编辑结合示例 -->
<template>
  <div class="drag-demo">
    <h2>11. 拖拽排序与行内编辑</h2>
    <p class="description">组合使用拖拽排序和行内编辑功能</p>
    
    <Table
      :data="taskList"
      :columns="columns"
      draggable
      @update:data="handleDataUpdate"
      row-key="id"
      border
      stripe
    >
      <!-- 任务名称编辑 -->
      <template #cell-task="{ row }">
        <div class="editable-cell">
          <input 
            v-if="editingId === row.id && editField === 'task'"
            v-model="editingValue"
            @blur="saveEdit(row, 'task')"
            @keyup.enter="saveEdit(row, 'task')"
            @keyup.esc="cancelEdit"
            ref="editInput"
            class="edit-input"
          />
          <div 
            v-else 
            @click="startEdit(row, 'task', row.task)"
            class="cell-content"
          >
            {
  { row.task }}
            <span class="edit-icon">✎</span>
          </div>
        </div>
      </template>
      
      <!-- 进度编辑 -->
      <template #cell-progress="{ row }">
        <div class="editable-cell">
          <input 
            v-if="editingId === row.id && editField === 'progress'"
            v-model="editingValue"
            type="number"
            min="0"
            max="100"
            @blur="saveEdit(row, 'progress')"
            @keyup.enter="saveEdit(row, 'progress')"
            @keyup.esc="cancelEdit"
            ref="editInput"
            class="edit-input progress-input"
          />
          <div 
            v-else 
            @click="startEdit(row, 'progress', row.progress)"
            class="cell-content"
          >
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{ width: `${row.progress}%` }"
                :class="getProgressClass(row.progress)"
              ></div>
            </div>
            <span class="progress-text">{
  { row.progress }}%</span>
            <span class="edit-icon">✎</span>
          </div>
        </div>
      </template>
      
      <!-- 状态编辑 -->
      <template #cell-status="{ row }">
        <div class="editable-cell">
          <select
            v-if="editingId === row.id && editField === 'status'"
            v-model="editingValue"
            @blur="saveEdit(row, 'status')"
            @change="saveEdit(row, 'status')"
            class="edit-select"
          >
            <option value="未开始">未开始</option>
            <option value="进行中">进行中</option>
            <option value="已完成">已完成</option>
            <option value="已暂停">已暂停</option>
          </select>
          <div 
            v-else 
            @click="startEdit(row, 'status', row.status)"
            class="cell-content"
          >
            <span 
              class="status-tag"
              :class="getStatusClass(row.status)"
            >
              {
  { row.status }}
            </span>
            <span class="edit-icon">✎</span>
          </div>
        </div>
      </template>
    </Table>
    
    <!-- 编辑历史 -->
    <div v-if="editHistory.length" class="edit-history">
      <h3>编辑历史</h3>
      <ul>
        <li v-for="(record, index) in editHistory" :key="index">
          {
  { record.id }}号任务: {
  { record.field }} 从 "{
  { record.oldValue }}" 改为 "{
  { record.newValue }}"
          <span class="time-stamp">{
  { new Date(record.timestamp).toLocaleTimeString() }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

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

const taskList = ref([
  {
      id: 1, task: '需求文档编写', progress: 30, status: '进行中' },
  {
      id: 2, task: '技术方案设计', progress: 60, status: '进行中' },
  {
      id: 3, task: '开发环境搭建', progress: 100, status: '已完成' },
  {
      id: 4, task: '基础组件开发', progress: 45, status: '进行中' },
  {
      id: 5, task: '接口对接测试', progress: 0, status: '未开始' },
])

const columns = [
  {
      title: '任务', dataIndex: 'task', width: '200px' },
  {
      title: '进度', dataIndex: 'progress', width: '140px' },
  {
      title: '状态', dataIndex: 'status', width: '120px' }
]

// 行数据更新
const handleDataUpdate = (newData) => {
     
  taskList.value = newData
}

// 编辑相关状态
const editingId = ref(null)
const editField = ref(null)
const editingValue = ref('')
const editInput = ref(null)
const originalValue = ref(null)
const editHistory = ref([])

// 开始编辑
const startEdit = (row, field, value) => {
     
  editingId.value = row.id
  editField.value = field
  editingValue.value = value
  originalValue.value = value
  
  // 在下一个渲染周期聚焦输入框
  nextTick(() => {
     
    if (editInput.value) {
     
      editInput.value.focus()
    }
  })
}

// 保存编辑
const saveEdit = (row, field) => {
     
  if (editingValue.value === originalValue.value) {
     
    cancelEdit()
    return
  }
  
  // 根据字段类型进行格式化
  let formattedValue = editingValue.value
  if (field === 'progress') {
     
    formattedValue = Math.min(100, Math.max(0, parseInt(formattedValue) || 0))
  }
  
  // 更新数据
  const rowIndex = taskList.value.findIndex(t => t.id === row.id)
  if (rowIndex > -1) {
     
    // 记录编辑历史
    editHistory.value.unshift({
     
      id: row.id,
      field,
      oldValue: originalValue.value,
      newValue: formattedValue,
      timestamp: new Date()
    })
    
    // 使用新对象替换，确保响应式更新
    const updatedRow = {
      ...row, [field]: formattedValue }
    taskList.value = [
      ...taskList.