handleEdit(index, row) { console.log(index, row); },我是想在此方法内添加点击表格内的单元格时能修改表格内展现的数据,并非是模态框
时间: 2024-10-25 09:09:20 浏览: 10
在 `handleEdit` 方法中直接修改表格数据并更新视图,可以通过以下步骤实现:
1. **获取要编辑的单元格的数据**:通过传入的 `index` 和 `row` 参数来定位到要编辑的行和列。
2. **显示一个可编辑的输入框**:将当前单元格的内容替换为一个输入框,允许用户进行编辑。
3. **保存编辑后的数据**:当用户完成编辑后,将输入框的内容保存回原始数据中,并重新渲染表格。
以下是具体的代码示例:
```javascript
methods: {
handleEdit(index, row) {
// 获取当前单元格的值
const cellValue = row[row.column.property];
// 显示输入框
const input = document.createElement('input');
input.type = 'text';
input.value = cellValue;
input.classList.add('form-control'); // 可选:添加样式
// 替换当前单元格的内容
const td = event.target.parentNode;
td.innerHTML = '';
td.appendChild(input);
// 聚焦输入框
input.focus();
// 监听输入框的 blur 事件(失去焦点)
input.addEventListener('blur', () => {
// 获取新的值
const newValue = input.value;
// 更新数据
row[row.column.property] = newValue;
// 重新渲染单元格
td.innerHTML = newValue;
});
},
handleDelete(index, row) {
console.log(index, row);
this.tableData.splice(index, 1);
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return 'warning-row';
} else if (rowIndex % 2 !== 0) {
return 'success-row';
}
},
}
```
### 解释
1. **获取当前单元格的值**:使用 `row[column.property]` 获取当前单元格的值。
2. **创建输入框**:使用 `document.createElement` 创建一个输入框,并设置其初始值为当前单元格的值。
3. **替换当前单元格的内容**:清空当前单元格的内容,并将输入框插入到单元格中。
4. **聚焦输入框**:使输入框自动获得焦点,方便用户直接开始编辑。
5. **监听输入框的 `blur` 事件**:当输入框失去焦点时,获取新的值并更新到数据中,然后重新渲染单元格。
这样,当你点击“Edit”按钮时,对应的单元格会变成一个输入框,你可以直接编辑内容,完成后输入框会消失,显示新的值。
阅读全文