el-table 点击单例编辑

### 实现 Element UI `el-table` 单元格单例编辑 为了实现在 `el-table` 中点击单元格触发单例编辑的效果，可以采用如下方案： #### 1. 组件设计 创建一个自定义组件用于处理表格内的可编辑字段。该组件应具备判断当前是否处于编辑状态的能力，并能响应用户的交互。 ```html <template> <el-table :data="tableData"> <!-- 假设这是其中一列 --> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <editable-cell v-if="editRow === scope.$index" :value.sync="scope.row.name" @close-edit="handleCloseEdit"/> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <!-- 更多列... --> </el-table> </template> ``` 这里使用了一个名为 `<editable-cell>` 的子组件来表示正在被编辑的状态；当不是指定行时，则显示原始文本[^2]。 #### 2. 编辑逻辑控制 通过监听整个表格区域的点击事件，关闭任何已打开的编辑器实例。这可以通过捕获全局点击事件并检查点击位置是否位于目标单元格外完成。 ```javascript mounted() { document.addEventListener('click', this.handleClickOutside); }, methods: { handleClickOutside(event) { const tableEl = this.$refs.tableWrapper; if (this.editRow !== null && !tableEl.contains(event.target)) { this.handleCloseEdit(); } }, handleCellClick(row, column, cell, event){ // 阻止冒泡以防止立即触发外部点击处理器 event.stopPropagation(); // 如果已经有其他行在编辑则先结束其编辑过程 if(this.editRow != row.index){ this.handleCloseEdit(() => { this.startEditing(row.index); }); } else{ this.startEditing(row.index); } }, startEditing(index){ this.editRow = index; }, handleCloseEdit(callback=(()=>{})){ this.editRow = null; nextTick().then(callback); } } ``` 上述代码片段展示了如何管理编辑模式切换以及确保只有一个单元格能够同时进入编辑状态[^3]。 #### 3. 自定义编辑器组件 (`EditableCell`) 这个简单的输入框允许用户修改内容直到按下回车键确认更改或失去焦点取消编辑。 ```vue <script setup lang="ts"> import { ref, watchEffect } from 'vue'; const props = defineProps<{ value?: string | number, }>(); let localValue = ref(props.value); watchEffect(() => { localValue.value = props.value; }); defineEmits(['update:value', 'close-edit']); function confirmChange(){ emit('update:value', localValue.value); } // 处理失焦或其他方式退出编辑的情况 function onBlurOrEnter(e:Event){ e.preventDefault(); emit('close-edit'); } </script> <template> <input type="text" class="inline-editor-input" v-model.trim="localValue" @blur="onBlurOrEnter" @keyup.enter="confirmChange()"> </template> <style scoped> .inline-editor-input { border:none; outline:none; width:80%; } </style> ``` 此部分实现了具体的编辑功能，包括双向绑定数据、提交更新后的值给父级组件以及提供一种机制让父级知道何时应该停止编辑[^4]。