vue实现表格多行修改

实现多行编辑功能

在Vue中实现表格多行编辑功能，可以通过结合v-model、动态绑定和状态管理来完成。以下是一个典型实现方案：

数据准备

data() {
  return {
    tableData: [
      { id: 1, name: 'Item 1', price: 10, editing: false },
      { id: 2, name: 'Item 2', price: 20, editing: false }
    ],
    editingRows: new Set()
  }
}

模板结构

<el-table :data="tableData">
  <el-table-column prop="name" label="Name">
    <template #default="{ row }">
      <span v-if="!row.editing">{{ row.name }}</span>
      <el-input v-else v-model="row.name"></el-input>
    </template>
  </el-table-column>
  <!-- 其他列... -->
  <el-table-column label="Operations">
    <template #default="{ row }">
      <el-button @click="toggleEdit(row)">
        {{ row.editing ? 'Save' : 'Edit' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>

编辑状态管理

切换编辑状态

methods: {
  toggleEdit(row) {
    row.editing = !row.editing
    if (row.editing) {
      this.editingRows.add(row.id)
    } else {
      this.editingRows.delete(row.id)
      // 这里可以添加保存逻辑
    }
  }
}

批量保存功能

saveAll() {
  this.tableData.forEach(row => {
    if (row.editing) {
      // 调用API保存数据
      row.editing = false
    }
  })
  this.editingRows.clear()
}

高级实现方案

对于更复杂的场景，可以考虑使用以下优化方案：

使用计算属性

computed: {
  isEditingAnyRow() {
    return this.editingRows.size > 0
  }
}

添加验证逻辑

validateRow(row) {
  return row.name && row.price > 0
}

响应式优化

watch: {
  tableData: {
    handler(newVal) {
      // 自动保存或其它处理
    },
    deep: true
  }
}

使用第三方组件库

如果使用Element UI等组件库，可以利用其内置功能简化实现：

Element UI示例

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <!-- 其他列 -->
</el-table>

<el-button @click="batchEdit" :disabled="selectedRows.length === 0">
  Batch Edit
</el-button>

批量编辑处理

batchEdit() {
  this.selectedRows.forEach(row => {
    row.editing = true
    this.editingRows.add(row.id)
  })
}

以上方案可以根据实际需求进行组合和调整，实现灵活的多行编辑功能。