elementui 行内编辑（element-ui表格编辑）

前言：

准备：

element-ui vue3 vscode

实现步骤：

数据标定 打开激活 编辑保存

1. 设定需要编辑的表格单元格是否编辑标识

在请求后台表格数据时进行一个二次包装
    
    
 ，如果后端已经处理则不需要在进行包装（此处包装是否编辑的标识为了区分显示编辑框和纯内容显示）

以上述图片效果为例     


     


     ，需要对三个字段进行标识    
    
    
。

标识数据JS代码：

// 设备分组列表 getList() { queryList().then((res) => { // 获取数据后通过foreach循环对数据对象进行标识 res.data.List.forEach(item => { item.xEdit = false; item.yEdit = false; item.zEdit = false; this.list.cameras.push(item) }); }); },

HTML代码：一下代码实现了在未编辑状态下的显示效果

<!-- 添加的标识为了进行控制表格行中的需要编辑的单元格中的span标签和el-input标签的显示与隐藏 --> <el-table :data="list" stripe style="width: 100%"> <el-table-column prop="cameraX" label="坐标位置:X"> <template slot-scope="scope"> <span v-show="!scope.row.xEdit">{{ scope.row.cameraX }}</span> <el-input v-show="scope.row.xEdit" size="mini" v-model="scope.row.cameraX"></el-input> </template> </el-table-column> <el-table-column prop="cameraY" label="坐标位置:Y"> <template slot-scope="scope"> <span v-show="!scope.row.yEdit">{{ scope.row.cameraY }}</span> <el-input v-show="scope.row.yEdit" size="mini" v-model="scope.row.cameraY"></el-input> </template> </el-table-column> <el-table-column prop="cameraZ" label="坐标位置:Z"> <template slot-scope="scope"> <span v-show="!scope.row.zEdit">{{ scope.row.cameraZ }}</span> <el-input v-show="scope.row.zEdit" size="mini" v-model="scope.row.cameraZ"></el-input> </template> </el-table-column> </el-table>

输出效果

2. 双击或单击行中单元格进行编辑激活

添加行双击或单机监听事件

element-ui table中提供了单元格被双击或单击的监听事件

html代码

<el-table :data="list" stripe style="width: 100%" @cell-dblclick="openEditColumn"></el-table>

js代码

// 打印输出测试 openEditColumn(row, column, cell, event) { console.log(row, column); },

输出效果

激活单元格进入编辑状态

// 由于设定了多个可编辑字段 




 




 




，在此处需要针对判断 openEditColumn(row, column, cell, event) { console.log(row, column) if (column.property === "cameraX") { this.equipmentList.cameras.forEach(item => { if (item.id === row.id) { // 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换） item.xEdit = true } }); } else if (column.property === "cameraY") { this.equipmentList.cameras.forEach(item => { if (item.id === row.id) { item.yEdit = true } }); } else if (column.property === "cameraZ") { this.equipmentList.cameras.forEach(item => { if (item.id === row.id) { item.zEdit = true } }); } },

效果如下

3. 编辑内容并保存数据关闭编辑状态

HTML代码

<!-- 给对应编辑的单元格中的el-input添加光标移除后触发事件

   

   

，进行数据保存与编辑状态关闭 --> <el-table-column prop="cameraX" label="坐标位置:X"> <template slot-scope="scope"> <span v-show="!scope.row.xEdit">{{ scope.row.cameraX }}</span> <el-input @blur="editColumnData(scope.row, cameraX)" @keyup.enter.native="editColumnData(scope.row, cameraX)" v-show="scope.row.xEdit" size="mini" v-model="scope.row.cameraX"></el-input> </template> </el-table-column>

JS代码

// 表格数据编辑保存并关闭编辑 /** * row：当前编辑行数据 * column：当前编辑列名称（区分作用） */ editColumnData(row, column) { // 关闭表格编辑 this.list.forEach(item => { if (item.id === row.id) { if (column === "cameraX") { item.xEdit = false; } else if (column === "cameraY") { item.yEdit = false; } else if (column === "cameraZ") { item.zEdit = false; } } }); },

效果如下

4. 完整代码

<template> <div class="app-container"> <el-table :data="list" stripe style="width: 100%" @cell-dblclick="openEditColumn"> <el-table-column prop="cameraX" label="坐标位置:X"> <template slot-scope="scope"> <span v-show="!scope.row.xEdit">{{ scope.row.cameraX }}</span> <el-input @blur="editColumnData(scope.row, cameraX)" @keyup.enter.native="editColumnData(scope.row, cameraX)" v-show="scope.row.xEdit" size="mini" v-model="scope.row.cameraX"></el-input> </template> </el-table-column> <el-table-column prop="cameraY" label="坐标位置:Y"> <template slot-scope="scope"> <span v-show="!scope.row.yEdit">{{ scope.row.cameraY }}</span> <el-input @blur="editColumnData(scope.row, cameraY)" @keyup.enter.native="editColumnData(scope.row, cameraY)" v-show="scope.row.yEdit" size="mini" v-model="scope.row.cameraY"></el-input> </template> </el-table-column> <el-table-column prop="cameraZ" label="坐标位置:Z"> <template slot-scope="scope"> <span v-show="!scope.row.zEdit">{{ scope.row.cameraZ }}</span> <el-input @blur="editColumnData(scope.row, cameraZ)" @keyup.enter.native="editColumnData(scope.row, cameraZ)" v-show="scope.row.zEdit" size="mini" v-model="scope.row.cameraZ"></el-input> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: "handleViewCamera", components: {}, props: { }, data() { return { list: {}, }; }, created() { }, mounted() { this.getList(); }, methods: { // 获取数据列表 getList() { queryList(this.regionId).then((res) => { res.data.cameras.forEach(item => { item.xEdit = false; item.yEdit = false; item.zEdit = false; this.list.push(item) }); }); }, // 打开信息编辑 openEditColumn(row, column, cell, event) { if (column.property === "cameraX") { this.equipmentList.cameras.forEach(item => { if (item.id === row.id) { // 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换） item.xEdit = true } }); } else if (column.property === "cameraY") { this.equipmentList.cameras.forEach(item => { if (item.id === row.id) { item.yEdit = true } }); } else if (column.property === "cameraZ") { this.equipmentList.cameras.forEach(item => { if (item.id === row.id) { item.zEdit = true } }); } }, // 表格数据编辑保存并关闭编辑 editColumnData(row, column) { // 关闭表格编辑 this.list.forEach(item => { if (item.id === row.id) { if (column === "cameraX") { item.xEdit = false; } else if (column === "cameraY") { item.yEdit = false; } else if (column === "cameraZ") { item.zEdit = false; } } }); } }, }; </script> <style lang="scss" scoped></style>