当前位置：首页 > VUE

vue实现排班可编辑

2026-01-21 21:35:48VUE

Vue 实现可编辑排班功能

要实现一个可编辑的排班功能，可以结合 Vue 的数据绑定和事件处理机制。以下是一个完整的实现方案：

数据结构设计

使用一个二维数组来表示排班表，每个单元格包含员工信息和班次状态。

data() {
  return {
    schedule: [
      [{ employee: '张三', shift: '早班' }, { employee: '李四', shift: '晚班' }],
      [{ employee: '王五', shift: '休息' }, { employee: '赵六', shift: '中班' }]
    ],
    employees: ['张三', '李四', '王五', '赵六'],
    shifts: ['早班', '中班', '晚班', '休息']
  }
}

表格渲染

使用 v-for 指令渲染排班表格，并为每个单元格添加编辑功能。

<table class="schedule-table">
  <tr v-for="(row, rowIndex) in schedule" :key="rowIndex">
    <td v-for="(cell, colIndex) in row" :key="colIndex">
      <div v-if="!cell.editing" @click="startEditing(rowIndex, colIndex)">
        {{ cell.employee }} - {{ cell.shift }}
      </div>
      <div v-else>
        <select v-model="cell.employee">
          <option v-for="emp in employees" :value="emp">{{ emp }}</option>
        </select>
        <select v-model="cell.shift">
          <option v-for="shift in shifts" :value="shift">{{ shift }}</option>
        </select>
        <button @click="saveEdit(rowIndex, colIndex)">保存</button>
      </div>
    </td>
  </tr>
</table>

编辑功能实现

添加方法来处理编辑状态的切换和数据保存。

methods: {
  startEditing(rowIndex, colIndex) {
    this.$set(this.schedule[rowIndex][colIndex], 'editing', true)
  },
  saveEdit(rowIndex, colIndex) {
    this.$set(this.schedule[rowIndex][colIndex], 'editing', false)
  }
}

样式优化

添加基础样式使表格更易读。

.schedule-table {
  border-collapse: collapse;
  width: 100%;
}
.schedule-table td {
  border: 1px solid #ddd;
  padding: 8px;
  cursor: pointer;
}
.schedule-table td:hover {
  background-color: #f5f5f5;
}