element ui表格编辑,elementui双击编辑
最近通过在网上查找资料，自己整合研究了一个可以直接在表格中操作数据的基于元素-用户界面的前端模板。可以让增改数据的操作显得方便一点，感兴趣的可以了解一下
目录
实现效果实现代码最近由于公司开始使用elementUI，开发的过程中需要用到对表格的单元格进行编辑，下面是我自己实现表格可编辑的方式，感兴趣的可以了解一下
实现效果
编辑之后对应表格数据该字段值也就发生了变化，控制台输出所有数据即可查看变化
实现代码
1、自定义编辑组件
模板
div class=editCell
div class= canEdit v-if= canEdit @ click= begin edit
标签v-show=！编辑状态
span v-if=this.value！==null this.value！==未定义this.value！== { { value } } { { this。后缀} }/span
span v-else style= padding-left:100%；填充顶部：100%;/
/标签
标签v-show=editStatus
投入
type=text
class=inputClass
ref=输入
v-on:keyup.13=loseFocus
:value=value
@blur=loseFocus
/
/标签
/div
label class=cannotEdit v-else
span{{ value }}{{ suffix }}/span
/标签
/div
/模板
脚本
导出默认值{
名称：编辑单元，
道具：{
/**
* 绑定值
*/
值：{
必填：真
},
/**
* 是否可编辑
*/
CanEdit: {
类型：布尔型，
默认值：真
},
/**
* 格式化函数
*/
格式数据：{
类型：功能，
默认值：值={
返回值；
}
},
/**
* 编辑后事件
*/
afterEdit: {
类型：功能，
默认值：()={}
},
/**
* 是否初始格式化
*/
initFormat: {
类型：布尔型，
默认值：错误
},
后缀：{
默认值：""
}
},
data() {
返回{
editStatus: false，
显示数据： ,
默认数据： ,
超时：空
};
},
方法：{
/**
* 单击开始编辑
*/
beginEdit() {
this.editStatus=true
setTimeout(()={
这个参考文献。输入。焦点()；
}, 1);
},
/**
* @param {event}事件
* 丢失焦点关闭编辑状态，并保存数据
*/
丢失焦点（事件){
设价值=这个。格式化数据(事件。目标。值)；
this.editData(值);
this.closeEditStatus(值);
this.afterEdit(值);
},
/**
* 发布投入事件修改数据
* @param值
*/
编辑数据（值){
这个$emit(输入，值);
},
/**
* 关闭编辑状态
* @param值
*/
closeEditStatus(值){
this.editStatus=false
},
/**
* 初始格式化数据
*/
initData() {
设新值=这个。格式化数据(这。值)；
这个. emit(input ，新值)；
}
},
已安装(){
if (this.initFormat) {
这个。initdata()；
}
},
观察：{
值:函数(纽瓦尔){
这个. emit(input ，这个。格式化数据(新值))；
}
}
};
/脚本
样式范围。编辑单元格{
身高：100%;
宽度：100%;
}。输入类{
高度：30px
宽度：100%;
背景色：# fff
边框-半径：4px
边框：1px固体# dcdfe6
颜色：# 606266;
显示：内嵌-块；
字体大小：继承；
行高：30px
大纲：0;
填充：0 15px
过渡：边框颜色0.2秒三次贝塞尔(0.645,0.045,0.355,1);
溢出：可见；
触摸-动作：操纵；
边距：0;
}
/风格
页面调用
从" @/组件/编辑单元/编辑单元"导入编辑单元格；
组件：{编辑单元}，
埃尔-表格-列
v-for=表列中的项目
:prop=item.dataIndex
:label=item.title
:width=item.width
:align=item.align
:key=item.id
:fixed=item.fixed
//在这里调用自定义组件(dataIndex是表头数据中的字段，相当于显示表头老师对应的老师姓名)
模板槽-范围=“范围”
span v-if=item.dataIndex！==batchInvest item.dataIndex！==备注 { { scope . row[item . data index]} }/span
//如果需要格式化数据，可以设置：format-data= format fun format fun。这个方法可以在当前页面的方法中定义。
edit-cell v-else v-model= scope . row[item . data index]:can-edit= true /
/模板
El-表格-列
v-for= item . children中的item2
:prop=item2.dataIndex
:label=item2.title
:width=item2.width
:align=item2.align
:key=item2.id
:fixed=item2.fixed
/El-表格-列
/El-表格-列
关于element-ui的这篇文章到此结束，直接点击表格中的单元格进行编辑。更多相关元素单元格编辑内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。