本文介绍如何在Vue项目中利用Element-UI组件库，通过监听单元格鼠标进入和离开事件，结合自定义模板，实现表格单元格的可编辑功能。通过设置editFlag标志控制显示文本或编辑框，并提供编辑和保存操作。
<template>
<el-table
:data="tableData"
border
@cell-mouse-enter="handleMouseEnter"
@cell-mouse-leave="handleMouseOut"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template scope="scope">
<span v-if="!scope.row.editFlag">{
{ scope.row.name }}</span>
<span v-if="scope.row.editFlag" class="cell-edit-input"><el-input v-model="inputColumn1" placeholder="请输入内容"></el-input></span>
最低0.47元/天 解锁文章
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
