vue elementui表格,Vue el table 可编辑
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
元素的表格组件并没有给出明确的点击单个单元格进行的编辑的方案，我仔细阅读了官方的文档后，发现这个操作还是可以实现的。
实现原理
1、利用桌子组件的cell-click属性，可以获取当前点击的单元格列对应的师元素。
2、清空所有的名为current-cell的班级属性。
3、为当前获取的单元格师动态添加名为current-cell的班级属性。
4、控制单元格的投入标签的显示隐藏就能实现表格的编辑功能。
代码实现
模板
div class=tableDiv
El-table:data= table data 高亮显示-当前行@单元格-单击=单元格单击
埃尔-表格-列
表列中的v-for=(项目，索引
:key=index
:prop=item.prop
:label=item.label
:width=item.width
模板槽-范围="范围"
埃尔输入
v-if=item.edit
大小=小
ref=tableInput
v-model=scope.row[item.prop]
@blur=removeClass
@change=handleEdit(item.prop，scope .$index，scope.row)
/el-input
span { { scope。行[项目。prop]} }/span
/模板
埃尔-表格-列
中的v-for=(itemchild，indexchild
:key=indexchild
:prop=itemchild.prop
:label=itemchild.label
:width=itemchild.width
模板槽-范围="范围"
埃尔输入
v-if=itemchild.edit
大小=小
ref=tableInput
v-model= scope。行[项目子项。道具]
@blur=removeClass
@ change= handleEdit(item子级。道具，范围 index，scope.row)
/el-input
span { { scope。行[项目子项。prop]} }/span
/模板
/El-表格-列
/El-表格-列
/el-table
/div
/模板
脚本
从""导入{列，表数据} ./表列；
导出默认值{
data() {
返回{
tableData: tableData，
表格列：列
};
},
方法：{
handleEdit() {}，
单元格单击（行、列、单元格、事件){
对于(设I=0；我记录。getelementsbyclassname(当前单元格).长度；i ){
文档。getelementsbyclassname( current-cell )[I]。班级名单。移除(“当前单元格”)；
}
细胞。班级名单。add(当前单元格)；
},
removeClass(){
文档。getelementsbyclassname( current-cell )[0]。班级名单。移除(“当前单元格”)；
}
}
};
/脚本
样式范围。表Div .埃尔-输入{
显示：无；
}。电流单元100 . El-输入{
显示：块；
}。电流单元100 . El-输入跨度{
显示：无；
}
/风格
tableColumn.js文件
常量列=[
{标签: 项目名称，属性：项目名称，宽度： 300 ,关键字： 100 },
{标签: 项目编码，属性：项目代码，宽度： 150 ,关键字： 200 },
{标签: 单位，属性： 计算机名，宽度： 150 ,关键字： 300 ,编辑：true }，
{
标签: 费用，属性："",宽度："450",对齐："中心",键："400",子级：[
{标签: 人工费，道具： 五线谱，宽度： 150 ,键： 401 ,编辑：true }，
{标签: 资料费，属性： 材质，宽度： 150 ,键： 402 ,编辑：true }，
{标签: 场地费，属性： 站点，宽度： 150 ,关键字： 403 }
]
}
];
const tableData=[
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：1 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：2 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：3 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：4 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：5 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：6 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：7 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：8 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：9 },
{项目名称： 北京水立方，项目代码： 1351157698 ,计算机名：北京，工作人员： 100 ,材料： 84547 ,地点： 6544 ,排序：10 }
]
导出{
列，表数据
}
注意：注意相应的样式不能少，非常重要！
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。