el-table 实现拖拽和单元格编辑

### 实现 `el-table` 组件的行拖拽排序与单元格可编辑功能 #### 行拖拽排序 为了使 `el-table` 支持行拖拽排序，可以通过引入第三方库 Sortable.js 来增强原生的功能。此方法适用于 Vue 2 和 Vue 3 的项目环境。 安装依赖： ```bash npm install sortablejs --save ``` 创建一个新的 JavaScript 文件用于封装带有拖拽功能的表格组件： ```javascript // draggableTable.js import { defineComponent, onMounted } from 'vue'; import Sortable from 'sortablejs'; export default defineComponent({ props: { tableData: Array, handleSortChange: Function }, setup(props) { let el; const initSortable = () => { new Sortable(el.querySelector('tbody'), { animation: 180, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', onEnd({ newIndex, oldIndex }) { const targetRow = props.tableData.splice(oldIndex, 1)[0]; props.tableData.splice(newIndex, 0, targetRow); // 调用父级传入的方法处理顺序变化后的逻辑 typeof props.handleSortChange === 'function' && props.handleSortChange(); } }); }; onMounted(() => { nextTick().then(() => (el = document.getElementById('draggableTable'))); initSortable(); }); return {}; } }); ``` 在模板文件中使用上述定义好的组件并传递必要的属性: ```html <template> <div id="app"> <!-- 使用自定义组件 --> <draggable-table :table-data="dataList" @handle-sort-change="onSortChanged"></draggable-table> <!-- 定义原始的数据列表 --> <el-table :data="dataList"> ... </el-table> </div> </template> <script> import DraggableTable from './components/draggableTable.vue' export default { components: { DraggableTable }, data() { return { dataList: [ /* 初始化数据 */ ] }; }, methods: { onSortChanged() { console.log('The order has been changed'); } } } </script> ``` 以上实现了基于 `element-ui` 的 `el-table` 组件支持行之间的拖拽排序操作[^3]。 #### 单元格可编辑功能 对于实现单元格内的内容可以直接修改的需求，则可以在每一列设置输入框或其他合适的表单控件作为默认渲染器，在点击事件触发时切换显示状态来达到即时编辑的效果。 下面是一个简单的例子展示如何让某几列具备双击进入编辑模式的能力： ```html <!-- 只需替换原有的el-table-column中的slot-scope部分即可 --> <el-table-column label="Name" width="180px"> <template slot-scope="{ row }"> <span v-if="!row.editing">{{ row.name }}</span> <el-input v-model="row.name" size="mini" v-else></el-input> </template> </el-table-column> ... methods:{ toggleEdit(row){ this.$set(row,'editing', !row.editing); } } ... <tr v-for="(item,index) in tableData" @dblclick.native.prevent="toggleEdit(item)"> ... </tr> ``` 这里通过监听整个 tr 标签上的 dblclick 事件来控制对应行下各字段是否处于编辑态；当用户完成编辑后可通过保存按钮提交更改或者失去焦点自动更新模型值[^1]。