vue3点击表格某个单元格文本就切换成输入框,其他单元格不变化

编程入门 行业动态 更新时间:2024-10-11 15:23:15

vue3点击表格某个<a href=https://www.elefans.com/category/jswz/34/1770080.html style=单元格文本就切换成输入框,其他单元格不变化"/>

vue3点击表格某个单元格文本就切换成输入框,其他单元格不变化

<el-table :data="data.tableData" height="60vh" border scrollbar-aways-on><el-table-column label="序号" type="index" width="80" fixed /><el-table-column label="操作" width="120" fixed><template #default="{ row }"><el-button type="danger" text @click="deleteBtn(row)" :disabled="row.status">删除</el-button><el-button style="color: #3592FF" text @click="enableBtn(row)">{{ row.status ? '停用' : '启用' }}</el-button></template></el-table-column><el-table-column prop="status" label="状态" width="120" /><el-table-column prop="phone" label="手机号" /><el-table-column prop="kanno" label="操作人" /><el-table-column prop="kanno" label="操作时间" /><el-table-column prop="kanno" label="创建人" /><el-table-column prop="createTime" label="创建时间" /><el-table-column label="姓名"><template #default="scope"><template v-if="scope.cellIndex == cellIndex && scope.$index == index"><el-input v-model="scope.row.status" @blur="saveCell" /></template><template v-else><div @click="editCell(scope, scope.$index)">{{ scope.row.status }}</div></template></template></el-table-column></el-table>
const cellIndex = ref('')
const index = ref('')function editCell(row, ind) {cellIndex.value = row.cellIndexindex.value = ind
}
function saveCell() {cellIndex.value = ''index.value = ''
}

效果如下

点击第一行的文本

点击第二行文本

更多推荐

vue3点击表格某个单元格文本就切换成输入框,其他单元格不变化

本文发布于:2023-12-07 19:40:05,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1671665.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:单元格   输入框   表格   文本

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!